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

1.打开阿里icon,注册 >登录>图标管理>我的项目

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

 Vue Element-UI使用第三方icon图标(转) 随笔 第1张

2.新建项目

Vue Element-UI使用第三方icon图标(转) 随笔 第2张

Vue Element-UI使用第三方icon图标(转) 随笔 第3张

3. 添加icon到项目中

在图标库中找到想要的icon后,加入购物车,然后点击右上角的购物车,把icon添加到你的项目里吧~

Vue Element-UI使用第三方icon图标(转) 随笔 第4张

Vue Element-UI使用第三方icon图标(转) 随笔 第5张

设置fontClass,然后下载到本地Vue Element-UI使用第三方icon图标(转) 随笔 第6张

Vue Element-UI使用第三方icon图标(转) 随笔 第7张

5.下载后进行解压。解压后修改其中iconfont.css文件

Vue Element-UI使用第三方icon图标(转) 随笔 第8张

 注意:el-icon-ali是你之前设置的icon前缀,第二个el-icon-ali前边有空格的

 

6.上边设置好以后,打开vue项目,在src-assets下创建了icon文件夹,将所有的文件复制了过来

在main.js里边把css引进来

Vue Element-UI使用第三方icon图标(转) 随笔 第9张

然后重新npm run dev 一下

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

Vue Element-UI使用第三方icon图标(转) 随笔 第10张

使用两种引用方式,跟element自带的使用方法一样

<el-button icon="el-icon-alifresh"  size="small" circle @click="updateNum"></el-button>
<i class="el-icon-alifresh"></i>

 

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄