总体来说vue引入第三方字体库不算什么难度，如果出错，很多情况下是我们没有注意到一些情况，比如类名冲突等等，导致达不到所需的效果。我们这里以阿里的IconFont图标库来一步步引入。
1、添加所需的图标入库
1.png
2、图标库里的图标库添加到新项目,起名test（按自己需求改），然后点击确定
添加到新项目.png
3、在我们添加的项目test里，点击编辑项目
编辑项目.png
3、在编辑项目里设置自己字体名称，然后点击保存
如果不设置唯一，很容易跟其他字体库名称冲突，所以这里建议设置自己熟知的名称(便于区别)，我们这里加个了后缀-ali
字体名称.png
4、在我们的test项目里点击下载到本地
把字体项目下载到我们电脑，解压，把里面的问题复制到我们项目src/assets/icon文件夹下，如果没有此文件，自己创建（按自己需求创建起名）。这里我们把所有的文件都复制过来了，是因为为了以后方便别人活着自己查阅。
icon图标.png
5、打开icon字体文件下的iconfont.css，添加类名
[class^="icon-ali"], [class*=" icon-ali"] { font-family:"iconfont-ali" !important; /* 以下内容参照第三方图标库本身的规则 */
font-size: 18px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}这里需要注意，第二个class前面有个空格！！！
6、在vue项目里运用
运用之前我们要先引入iconfont.css,最好在app.vue里我们全局引入这个文件，这样在其他页面就不需要r引入了。
<i class="icon-ali-shezi"></i><style> @import '~@/assets/icon/iconfont.css' //https://www.jianshu.com/p/901c7eaed40f</style>
效果如下如：
设置图标.png
至于为什么 @import '~@/assets/icon/iconfont.css'能找到iconfont.css的地址，请参见：https://www.jianshu.com/p/901c7eaed40f这篇文章，很详细。
到此项目引入第三方图标库等于就完成了。
作者：_小坦克_
链接：https://www.jianshu.com/p/e7329afafb4b
随时随地看视频
