最近一個項目用到 vue 和?element ui開發前端。使用element ui自帶的icon太少，所以引入第三方的。截止目前為止國內外網絡上的相關教程我搜索到沒超過5篇，而且都不詳細，即使全部閱讀后總結也不能正常引入第三方圖標，所以決定寫一篇引入引入第三方圖標的教程。

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

2·進入網站登錄賬戶后，新建一個項目;在該網站選擇一些自己要用到的圖標如上圖點擊購物車按鈕添加到購物車。

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

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

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

6·點擊更多操作對該項目進行一些設置如下圖：

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

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

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

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

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

其中2個class 處 和 font-family 的設置是來自在 阿里矢量庫項目設置的參數，請填寫一致,比如我項目設置的參數ali-icon-***;那么在class="ali-icon"。 font-family=“iconfont”（注意：第二個class處前面有個空格）

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

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

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

重新編譯啟動前端 npm run dev

9·在項目中使用圖標有兩種方式 如 我的圖標全稱為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>

#############完結#############

?

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。