vue elementui 引入第三方icon iconfront

时间 2019-11-14

标签 vue elementui 引入第三方 icon iconfront 繁體版

原文原文链接

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

首先须要在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中css

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

在vue项目中的main.js中import刚才建立的iconfront.csshtml

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便可vue

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