最近一個項目用到 vue 和?element ui開發(fā)前端。使用element ui自帶的icon太少，所以引入第三方的。截止目前為止國內(nèi)外網(wǎng)絡(luò)上的相關(guān)教程我搜索到?jīng)]超過5篇，而且都不詳細(xì)，即使全部閱讀后總結(jié)也不能正常引入第三方圖標(biāo)，所以決定寫一篇引入引入第三方圖標(biāo)的教程。

1·基于阿里巴巴矢量圖標(biāo)庫的一篇教程，地址;http://www.iconfont.cn/

2·進(jìn)入網(wǎng)站登錄賬戶后，新建一個項目;在該網(wǎng)站選擇一些自己要用到的圖標(biāo)如上圖點(diǎn)擊購物車按鈕添加到購物車。

3·把購物車添加的圖標(biāo)添加至自己新建的項目如下圖

4·然后在下圖，圖標(biāo)管理，我的項目里找到你項目所添加的圖標(biāo)。

5·除了從該網(wǎng)站選擇你要用到的圖標(biāo)外還可以點(diǎn)擊上圖右上角處自己上傳svg格式圖標(biāo)到阿里矢量庫。（?官方推薦 使用 adobe illustrator ?設(shè)計圖標(biāo)并提供了ai模板）

6·點(diǎn)擊更多操作對該項目進(jìn)行一些設(shè)置如下圖：

輸入圖標(biāo)前綴為了不和element ui 的圖標(biāo)沖突 所以在 原有的el-icon后面加上自己的項目名稱。然后設(shè)置 font family 點(diǎn)擊保存

7·點(diǎn)擊下載到本地 會下載一個download.zip 解壓后 打開文件夾大致如下圖：

其中有一些demo 和 樣例 不用導(dǎo)入項目，但是為了給其他人一個提示也最好直接把所有文件拷貝到自己的vue項目中的：

src/assets 下 新建一個 icon文件夾。然后打開iconfont.css,添加 代碼如下

[class^="el-icon"], [class*=" el-icon"] {font-family:"iconfont" !important;/* 以下內(nèi)容參照第三方圖標(biāo)庫本身的規(guī)則 */font-size: 18px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }

其中2個class 處 和 font-family 的設(shè)置是來自在 阿里矢量庫項目設(shè)置的參數(shù)，請?zhí)顚懸恢?比如我項目設(shè)置的參數(shù)ali-icon-***;那么在class="ali-icon"。 font-family=“iconfont”（注意：第二個class處前面有個空格）

修改完該文件 效果如下圖：

8·然后在項目中要使用圖標(biāo)的頁面 引入上面修改的css。在main.js 中引入：

import './assets/icon/iconfont.css'

重新編譯啟動前端 npm run dev

9·在項目中使用圖標(biāo)有兩種方式 如 我的圖標(biāo)全稱為el-icon-addition

1）icon屬性

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

2）class屬性

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

#############完結(jié)#############

?

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的【Vue】 element ui 引入第三方图标的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。