vue中使用iconfont

以阿里的IconFont图标库来一步步引入

1、添加所需的图标入库

2、图标库里的图标库添加到新项目,起名test（按自己需求改），然后点击确定

3、在我们添加的项目test里，点击编辑项目

3、在编辑项目里设置自己字体名称，然后点击保存

如果不设置唯一，很容易跟其他字体库名称冲突，所以这里建议设置自己熟知的名称(便于区别)，我们这里加个了后缀-ali

4、在我们的test项目里点击下载到本地

把字体项目下载到我们电脑，解压，把里面的问题复制到我们项目src/assets/icon文件夹下，如果没有此文件，自己创建（按自己需求创建起名）。这里我们把所有的文件都复制过来了，是因为为了以后方便别人活着自己查阅。

5、在vue项目里运用

然后就可以全局引入，在main.js中引入iconfont.css样式
import ‘./assets/iconfont/iconfont.css’（这是我的文件路径，如果在不同的项目下需要注意）
import ‘xxx/xxx/xxx/iconfont.css’

使用方法

<i class="iconfont  icon-zitigui-xianxing">i>

本文并非完全原创，参考原文地址如下
原文1： https://www.jianshu.com/p/e7329afafb4b
原文2： https://www.cnblogs.com/chinabin1993/p/8184296.html