【vue.js】vue项目使用Iconfont（阿里图标库）

vue项目使用Iconfont（阿里图标库）

---

2019-11-12  19:07:02  by冲冲

 

一、操做步骤

① 登陆阿里巴巴矢量图标库 https://www.iconfont.cn ，注册帐号/关联帐号。

② 前往“图标管理”--“个人项目”

③ 点击

④ 建立图标库

 注意：

A. FontClass/Symbol前缀 很重要，若是项目中使用到ElementUI库就必定不要把前缀写成“el-icon”，会和ElementUI库的自带图标（icon）冲突，致使你图标显示不出来。

B. FontFamily必须写，可是内容没有严格限制（写啥都成）。

⑤ 选择须要的图标，添加入库

 

 ⑥ 下载至本地

 

 

 ⑦ 解压

 红圈的文件是有用的，其余的没啥用。

⑧ 放置到vue项目

在src文件夹，新建asset文件夹，里面再新建icon文件夹，存放红圈文件。

⑨ 在项目main.js文件导入

iconfont.css

 ⑩ 使用

 经过修改font-size，修改大小

 

二、参考

https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code