vue element-ui配置第三方图标库

配置第三方图标库的相关（博客）教程：

https://www.cnblogs.com/linyihai/p/10575668.html

https://www.cnblogs.com/ceceliahappycoding/p/10821966.html

制作svg图标字体可以参考下面这些连接的内容：

https://www.zhihu.com/question/29054543

https://jingyan.baidu.com/article/066074d69e8d7182c31cb012.html

https://www.jianshu.com/p/7423b1db96a4

https://www.cnblogs.com/linyihai/p/10575668.html

（下面内容【链接一】来源：lyh225）

elementui框架自带icon在开发大型前端应用时显得捉襟见肘。淘宝开源的iconfront的图标库上有很多优秀的icon图标。elementui支持整合iconfront到应用中，步骤如下：

首先需要在iconfront注册登陆，新建项目，然后把心仪的icon添加到项目中。

)
接下来有两种做法，一种是在线链接，一种是下载解压后拷贝到本地的项目。

在线链接方式如下
新建一个iconfont.css文件，添加如下内容，el-icon-ali是第一步新建项目时给定的icon名前缀。

[class^="el-icon-ali"], [class*="el-icon-ali"]
{
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

接下来将iconfront项目提供的在线链接添加到vue项目的index.html中

<!DOCTYPE html>
<html>
<head>
    ...
    <link>
</html rel="stylesheet" href="//at.alicdn.com/t/font_1100946_7gqmadkiso5.css
">

在vue项目中的main.js中import刚才创建的iconfront.css

import Vue from 'vue'
import ElementUI from 'element-ui'
import './assets/.../../iconfront.css'
Vue.use(ElementUI)

添加新icon时，只要更新index.html中的链接即可

下载导入方式
解压下载出所有文件，拷贝到vue适当目录中，找到iconfront.css文件，一样添加如下内容

[class^="el-icon-ali"], [class*="el-icon-ali"]
{
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

接下来只要在vue项目中的main.js中import刚才创建的iconfront.css即可

import Vue from 'vue'
import ElementUI from 'element-ui'
import './assets/.../../iconfront.css'
Vue.use(ElementUI)

：：：：实际使用时的小技巧：：：：

如果遇到需要修改图标的class值，可以到iconfont.css中修改：(样式名)

.el-icon-mt-food:before {
  content: "e66c";
}

不要改前缀，比如这里我只改了‘food’，然后在项目中就可以直接使用了。

<i class="el-icon-mt-food"></i>

这个方式不保证完全正确，如果要想保证没有问题，还是按标准设计好相关参数，如果不得不修改且保证无误的话还待继续研究。