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)

相關標籤/搜索

elementui+vue+i18n+vue

SQLite教程

MySQL教程

PHP教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。