VUE ---element ui 引入第三方 iconFont

引入第三方图标（icon）的教程

一、简介，以下是 阿里妈妈MUX 倾力打造的矢量图标 库

1.打开官网： http://www.iconfont.cn/

2.进入网站登录账号（3选1登录） ，登录成功后，

3.登录成功后，可以搜索自己想要的图标，然后加入购物车

4. 点击右上角的购物车后显示如下图，， 点击“添加至项目” 按钮

点击 Font Class 按钮  ----> 下载至本地 按钮

点击 更多操作 -----> 项目编辑    修改 fontClass名字 ，不和element的class冲突就可以

修改 fontClass名字  ，点击保存

7·点击下载到本地 会下载一个download.zip 解压后 打开文件夹大致如下图：

其中有一些demo 和 样例 不用导入项目，但是为了给其他人一个提示也最好直接把所有文件拷贝到自己的vue项目中的：

src/assets 下 新建一个 icon文件夹。效果如图，把文件全部放到icon下面

然后打开iconfont.css

添加 代码

[class^="el-icon-newfont"], [class*=" el-icon-newfont"] {
  font-family:"fontFamily" !important;
  /* 以下内容参照第三方图标库本身的规则 */
  font-size: 18px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

其中2个class 处 和 font-family 的设置是来自在 阿里矢量库项目设置的参数 请填写一致（注意：第二个class处前面有个空格）

修改完该文件 效果如下图：

8·然后在项目中要使用图标的页面 引入上面修改的css。

9·在项目中使用图标有两种方式 如 我的图标全称为 el-icon-newfont-qunfa

    1）icon属性

    

<el-button size="small" icon="newfont-qunfa" @click="handleAdd" style="padding:6px 4px;width: 90px">
   新增群组
</el-button>

    2）class属性

<el-button size="small" class="el-icon-newfont-qunfa" @click="handleAdd" style="padding:6px 4px;width: 90px">
   新增群组
</el-button>

大功告成 ，希望能帮到大家！！！