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)
