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

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

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

教程：

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

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

新建項(xiàng)目

新建項(xiàng)目

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

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

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

現(xiàn)在我們返回阿里icon首頁(yè)，點(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)頁(yè)面上的購(gòu)物車

頁(yè)面右邊的購(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; }  

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

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

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

記得引進(jìn)來(lái)

然后重新npm run dev 一下

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

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

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

最后效果:

總結(jié)

以上所述是小編給大家介紹的Vue Element使用icon圖標(biāo)教程詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！