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

對于我們來說，首選的當(dāng)然是阿里icon庫

教程：

1.打開阿里icon，注冊 >登錄>圖標(biāo)管理>我的項目

圖標(biāo)管理>我的項目，點進(jìn)去

新建項目

新建項目

項目名稱隨便寫。前綴注意，不要跟element-ui自帶的icon(前綴為：el-icon)重名了。

設(shè)置完，點新建

注意前綴。設(shè)置完，點新建

現(xiàn)在我們返回阿里icon首頁，點進(jìn)去你想要的icon庫，因為沒有批量導(dǎo)入購物車，所以一般情況下需要一個一個去點，太浪費時間，那么請在控制臺輸入以下代碼，批量導(dǎo)入

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加入購物車

點頁面上的購物車

頁面右邊的購物車圖標(biāo)，點擊

把圖標(biāo)都添加到剛才創(chuàng)建的項目里

添加

設(shè)置fontClass,然后下載到本地

下載到本地，解壓

解壓后你會得到這些文件，打開圖中圈中的文件

將以下代碼加進(jìn)去，注意：el-icon-third是你之前設(shè)置的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; }? ? ? ??

綠框的數(shù)據(jù)保持一致就好

2.上邊設(shè)置好以后，打開vue項目，我是在src-assets下創(chuàng)建了icon文件夾，將所有的文件復(fù)制了過來

在main.js里邊把css引進(jìn)來

記得引進(jìn)來

然后重新npm run dev 一下

3.打開在阿里icon的項目，復(fù)制你想要的圖標(biāo)代碼

圖標(biāo)代碼：el-icon-ump-qianniudaidise

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

最后效果:

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

前端頭號小學(xué)生，請大家多多指正，咱們共同進(jìn)步