在進(jìn)行項(xiàng)目開發(fā)過程中,vue項(xiàng)目中前端所使用的UI框架是element ui,但是element的字體圖標(biāo)庫不足以滿足日常開發(fā)的需要,或者公司項(xiàng)目要求使用本公司ui設(shè)計(jì)的圖標(biāo),都可以參考以下的步驟,

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

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

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

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

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

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

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

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

8. 點(diǎn)擊下載到本地,并將下載的文件放入所開發(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),

總結(jié)

以上所述是小編給大家介紹的vue項(xiàng)目引入Iconfont圖標(biāo)庫的教程圖解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論