Element引入Iconfont（阿裡巴巴矢量圖示庫）第三方圖示庫

最近在使用

vue-element-admin

開源項目進行系統開發，但是在引入第三方圖示庫的時候，出現了一些問題，百度找了找，也沒有找到自己想要的答案，最後經過多次嘗試，将問題解決。是以特此記錄一下，以便以後用到。

建立擷取圖示庫

• 登陸《阿裡巴巴矢量圖示庫》
• 建立項目

  

  注意：這裡的字首名稱不要使用

  el-icon

  避免和Element自身的沖突。

• 在圖示庫中選擇圖示，添加入庫
• 将選擇好的圖示，添加到項目

  

• 下載下傳到本地解壓

  Element引入圖示庫

  1、在項目中建立一個檔案夾，将剛才下載下傳的圖示引入。如圖：

2、引入全局CSS

3、修改

iconfont.css

• 修改前

• 修改後

1、删除

@font-face

中的最後一行，svg。

2、修改

.iconfont

4、修改圖示樣式

根據自己的需求，修改圖示的樣式和尺寸。

注意：這裡修改的是全局的。

5、使用圖示：

使用

i

标簽引入，

class

必須加上

iconfont