element-ui自帶的圖示庫還是不夠全，還是需要需要引入第三方icon，自己在用的時候一直有些問題，參考了些教程，詳細地記錄補充下

對於我們來說，首選的當然是阿里icon庫

教程：

1.開啟阿里icon，註冊 >登入>圖示管理>我的專案

圖示管理>我的專案，點進去

新建專案

新建專案

專案名稱隨便寫。字首注意，不要跟element-ui自帶的icon(字首為：el-icon)重名了。

設定完，點新建

注意字首。設定完，點新建

現在我們返回阿里icon首頁，點進去你想要的icon庫，因為沒有批量匯入購物車，所以一般情況下需要一個一個去點，太浪費時間，那麼請在控制檯輸入以下程式碼，批量匯入

var icons = document.querySelectorAll('.icon-gouwuche1');

var auto_click = function(i) { if (i < icons.length) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } };

auto_click(0);

然後點選回車，他會把這套相簿所有icon加入購物車

點頁面上的購物車

頁面右邊的購物車圖示，點選

把圖示都新增到剛才建立的專案裡

新增

設定fontClass,然後下載到本地

下載到本地，解壓

解壓後你會得到這些檔案，開啟圖中圈中的檔案

將以下程式碼加進去，注意：el-icon-third是你之前設定的icon字首，第二個el-icon-third前邊有空格的

[class^="el-icon-third"], [class*=" el-icon-third"]/*這裡有空格*/

{ font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale; }        

綠框的資料保持一致就好

2.上邊設定好以後，開啟vue專案，我是在src-assets下建立了icon資料夾，將所有的檔案複製了過來

在main.js裡邊把css引進來

記得引進來

然後重新npm run dev 一下

3.開啟在阿里icon的專案，複製你想要的圖示程式碼

圖示程式碼：el-icon-ump-qianniudaidise

使用，兩種引用方式，跟element自帶的使用方法一樣

最後效果:

不管你懂了沒有，反正我是懂了

作者：方丈先生
連結：https://www.jianshu.com/p/59dd28f0b9c9
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。