Vue、Element-ui项目中使用Iconfont(阿里图标库)

阿里图标库地址：https://www.iconfont.cn
方法一，阿里文档地址https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
方法二：引用
1， 先注册，再登录、找到图标管理、我的项目

2，创建项目

3， 编辑项目信息

1）、FontClass/Symbol前缀这个很重要，一定不要写成：el-icon-***这样的形式。
如果你写成这样的前缀，会和element-ui框架所带的图标（icon）冲突，导致你图标显示不出来
2）、FontFamily随便起一个名字，你能记住就行

4，项目里面添加自己想要的图标了

1）搜索图标

2）找到你想要的图标，点击添加购物车，当你点击完之后，购物车会出现你刚才添加入库的数量

3）购物车的图标添加到项目

4） 点添加至项目，刚才创建好的项目，在点击下面的确定

5） 图标添加完毕，将文件下载到本地

6），你会得到一个压缩包，打开这个压缩包，只需要画红线的文件

7）在vue-cli、element-ui项目中，src文件夹->assets->文件夹下面创建名字为icon的文件夹

8）将第六步中画红线的文件拷贝到icon文件夹中。

9）找到项目中的main.js文件，导入iconfont.css样式

import './assets/icon/iconfont.css'

10)引用图标

<i class="iconfont zhzy-zhishiku"></i>//记住别写错！！

假如你还想要其他图标，那就继续往里面添加入库，然后下载文件，找到有用的文件复制粘贴到icon文件夹里面来，一定要把之前的替换掉