以阿里的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