最近一個專案用到 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-ump"], [class*=" el-icon-ump"] {   font-family:"fontFamily" !important;   /* 以下內容參照第三方圖示庫本身的規則 */   font-size: 18px;   font-style:normal;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale; }

其中2個class 處 和 font-family 的設定是來自在 阿里向量庫專案設定的引數 請填寫一致（注意：第二個class處前面有個空格）

修改完該檔案 效果如下圖：

8·然後在專案中要使用圖示的頁面 引入上面修改的css。

9·在專案中使用圖示有兩種方式 如 我的圖示全稱為el-icon-ump-addition

1）icon屬性

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

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