怎么在vue項(xiàng)目中引入Iconfont圖標(biāo)庫(kù)

本篇文章給大家分享的是有關(guān)怎么在vue項(xiàng)目中引入Iconfont圖標(biāo)庫(kù)，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

1. 在阿里圖標(biāo)庫(kù)中選中你想要的圖標(biāo)庫(kù),并點(diǎn)擊進(jìn)去,

2. 注意: 我們?cè)谶x擇圖標(biāo)是后,如果是需要多個(gè)圖標(biāo)就將選中的圖標(biāo)加入購(gòu)物車(chē),但是如果我們沒(méi)有在這一個(gè)圖標(biāo)庫(kù)中找到自己需要的圖標(biāo)時(shí),可以去其他的圖標(biāo)庫(kù)中進(jìn)行選擇,但是要記住離開(kāi)這個(gè)圖標(biāo)庫(kù)的時(shí)候,記得將選擇的圖標(biāo)加入自己創(chuàng)建的項(xiàng)目中,

不然去其他圖標(biāo)庫(kù)的時(shí)候,圖標(biāo)庫(kù)中會(huì)被清空,除非你從新進(jìn)入這一個(gè)圖標(biāo)庫(kù)中,

3. 選擇完成后,點(diǎn)擊右上角選擇購(gòu)物車(chē),

4. 進(jìn)入購(gòu)物車(chē)頁(yè)面,然后點(diǎn)擊提交至項(xiàng)目中,因?yàn)槲覀兪切陆ǖ捻?xiàng)目,所以要先在圖標(biāo)庫(kù)中新建項(xiàng)目后,才能將以選中圖標(biāo)加入項(xiàng)目中,進(jìn)行保存,

5.  點(diǎn)擊添加后,進(jìn)入我的項(xiàng)目這個(gè)頁(yè)面,會(huì)顯示自己已經(jīng)選擇的圖標(biāo),在點(diǎn)擊下載到本地前,要注意配置一下圖表選項(xiàng),

6. 點(diǎn)擊編輯選項(xiàng);

7. 配置圖標(biāo)使用前綴,然后點(diǎn)擊保存,就可以下載到本地了,

8. 點(diǎn)擊下載到本地,并將下載的文件放入所開(kāi)發(fā)的項(xiàng)目中去,

9.  將下載好的文件放入項(xiàng)目中去,首先在src下的assets項(xiàng)目新建一個(gè)文件夾,名字自己定義,注意要明了,建下載的文件放進(jìn)去就好的,然后就可以修改iconfont.css文件,修改完,才能進(jìn)行顯示,

[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;
}

上面是要替換的css內(nèi)容,

10.  在main.js引入iconfont.css文件,也就是剛剛我們修改的文件,這樣就不用每一個(gè)組件想用圖標(biāo)的時(shí)候都要引一遍了,

11.  在組件中使用新下載的圖標(biāo),

以上就是怎么在vue項(xiàng)目中引入Iconfont圖標(biāo)庫(kù)，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。