Vue Element使用icon图标(第三方)

element-ui自带的图标库仍是不够全，仍是须要须要引入第三方icon，本身在用的时候一直有些问题，参考了些教程，详细地记录补充下

对于咱们来讲，首选的固然是阿里icon库

教程：

1.打开阿里icon，注册 >登陆>图标管理>个人项目

 

 

图标管理>个人项目，点进去

新建项目

 

 

新建项目

项目名称随便写。前缀注意，不要跟element-ui自带的icon(前缀为：el-icon)重名了。

设置完，点新建

 

注意前缀。设置完，点新建

如今咱们返回阿里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);

 

而后点击回车，他会把这套图库全部icon加入购物车

点页面上的购物车

 

页面右边的购物车图标，点击

把图标都添加到刚才建立的项目里

 

添加

设置fontClass,而后下载到本地

 

 

下载到本地，解压

解压后你会获得这些文件，打开图中圈中的文件

将如下代码加进去，注意：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; }        

 

绿框的数据保持一致就好

2.上边设置好之后，打开vue项目，我是在src-assets下建立了icon文件夹，将全部的文件复制了过来

在main.js里边把css引进来

 

 

记得引进来

而后从新npm run dev 一下

3.打开在阿里icon的项目，复制你想要的图标代码

 

 

图标代码：el-icon-ump-qianniudaidise

使用，两种引用方式，跟element自带的使用方法同样

 

 

 

最后效果:

 

 

 

转自：https://www.jianshu.com/p/59dd28f0b9c9