Vue Element使用icon圖標(biāo)教程詳解(第三方)

更新時(shí)間：2018年02月07日 13:35:11 作者：方丈先生

element-ui自帶的圖標(biāo)庫(kù)不夠全，還是需要需要引入第三方icon。下面小編給大家?guī)砹薞ue Element使用icon圖標(biāo)教程，感興趣的朋友一起看看吧

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

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

教程：

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

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

新建項(xiàng)目

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

設(shè)置完，點(diǎn)新建

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

現(xiàn)在我們返回阿里icon首頁，點(diǎn)進(jìn)去你想要的icon庫(kù)，因?yàn)闆]有批量導(dǎo)入購(gòu)物車，所以一般情況下需要一個(gè)一個(gè)去點(diǎn)，太浪費(fèi)時(shí)間，那么請(qǐng)?jiān)诳刂婆_(tái)輸入以下代碼，批量導(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);

然后點(diǎn)擊回車，他會(huì)把這套圖庫(kù)所有icon加入購(gòu)物車

點(diǎn)頁面上的購(gòu)物車

頁面右邊的購(gòu)物車圖標(biāo)，點(diǎn)擊

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

添加

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

下載到本地，解壓

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

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