Vue Element使用icon图标(第三方)
element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下
对于我们来说,首选的当然是阿里icon库
教程:
1.打开阿里icon,注册 >登录>图标管理>我的项目
![](http://upload-images.jianshu.io/upload_images/3713575-c2810c61730b11e0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
新建项目
![](http://upload-images.jianshu.io/upload_images/3713575-39e5e49def08f49d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
项目名称随便写。前缀注意,不要跟element-ui自带的icon(前缀为:el-icon)重名了。
设置完,点新建
![](http://upload-images.jianshu.io/upload_images/3713575-7d491d69a9f700e0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
现在我们返回阿里icon首页,点进去你想要的icon库,因为没有批量导入购物车,所以一般情况下需要一个一个去点,太浪费时间,那么请在控制台输入以下代码,批量导入
var icons = document.querySelectorAll('.icon-gouwuche1');
var auto_click = function(i) { if (i < icons.length) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } };
auto_click(0);
![](http://upload-images.jianshu.io/upload_images/3713575-c8fe20ac6c4c4033.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
点页面上的购物车
![](http://upload-images.jianshu.io/upload_images/3713575-abfb1b55fa0bfab8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/178/format/webp)
把图标都添加到刚才创建的项目里
![](http://upload-images.jianshu.io/upload_images/3713575-435e363e377db5bc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/582/format/webp)
设置fontClass,然后下载到本地
![](http://upload-images.jianshu.io/upload_images/3713575-624b2d240df471a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
解压后你会得到这些文件,打开图中圈中的文件
将以下代码加进去,注意:el-icon-third是你之前设置的icon前缀,第二个el-icon-third前边有空格的
[class^="el-icon-third"], [class*=" el-icon-third"]/*这里有空格*/
{ font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
![](http://upload-images.jianshu.io/upload_images/3713575-df103423baed2c0c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
2.上边设置好以后,打开vue项目,我是在src-assets下创建了icon文件夹,将所有的文件复制了过来
在main.js里边把css引进来
![](http://upload-images.jianshu.io/upload_images/3713575-e12162bdf1d8346d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
然后重新npm run dev 一下
3.打开在阿里icon的项目,复制你想要的图标代码
![](http://upload-images.jianshu.io/upload_images/3713575-c64b6479cbda4d47.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
使用,两种引用方式,跟element自带的使用方法一样
![](http://upload-images.jianshu.io/upload_images/3713575-5747cda7232cd932.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
最后效果:
![](http://upload-images.jianshu.io/upload_images/3713575-40968d4d9774aac7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
转自:https://www.jianshu.com/p/59dd28f0b9c9
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue Google浏览器插件 Vue Devtools无法使用的解决办法
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- This dependency was not found: * !!vue-style-loader!css-loader?……解决方案
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue + TS] Create Type-Safe Vue Directives in TypeScript
- 使用vue搭建应用四引入axios
- vue-router的使用
- gin-vue-admin菜单配置教程:父子菜单
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- 越来越受欢迎的Vue想学么,90后小姐姐今儿来教你
- Vue子孙三代的三级组件通信
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- vue-route(三)后台管理路由配置
- uni-app的vue与nvue的区别(更新中)
- 仓库管理系统-前后端分离项目(SpringBoot+Vue)