vue项目中引入字体库（icon）（详细步骤）

总体来说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这篇文章，很详细。

到此项目引入第三方图标库等于就完成了。