vue引入第三方图标库

背景：运营后台使用vue+element ui发现，element图标不能满足需求，需引入其他图标。

本人引入的阿里图标库，地址：http://www.iconfont.cn，引入步骤如下：

1.登录，点击进入“我的项目”，建立“项目”

 

 2.选择一些自己要用到的图标添加到“购物车”，选择完毕后，添加至项目

3.再次进入“我的项目”，点击“下载至本地”，如图

下载成功后解压文件如下：

4.项目引用，src/assets 下 新建一个 icon文件夹，将下载下来的文件夹内容复制到icon中，然后打开iconfont.css添加下面代码

/*请注意此处的class及font-family是自己配置的*/
[class^="el-icon-self"], [class*=" el-icon-self"] {
  font-family:"iconfont" !important;
  font-size: 14px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-right: 5px;
}

注：上面的2个class 和 font-family 应与阿里矢量库中项目设置的参数一致，如图

5.项目使用

（1）在main.js 引入  import './assets/icon/iconfont.css'

（2）在组件中使用  <i class="el-icon-self-publish"></i>