vue element項(xiàng)目引入icon圖標(biāo)的方法
為了減少頁(yè)面的加載速度,提高用戶體驗(yàn),對(duì)于一些圖片決定使用圖標(biāo)代替,但是發(fā)現(xiàn)element-ui的圖標(biāo)少得可憐,完全滿足不了我的要求,于是決定在element-ui的項(xiàng)目里引入第三方的圖標(biāo)庫(kù).
因?yàn)榘⒗锇桶秃Ａ康膱D標(biāo),所以決定引入阿里巴巴的圖標(biāo)庫(kù)
阿里巴巴圖標(biāo)網(wǎng)站: http://www.iconfont.cn/
下面具體介紹如何使用
1.注冊(cè)一個(gè)阿里巴巴賬號(hào),搜索自己需要的圖標(biāo),添加到購(gòu)物車,然后點(diǎn)擊添加到項(xiàng)目,如果沒有項(xiàng)目就需要?jiǎng)?chuàng)建.
2.點(diǎn)擊添加到項(xiàng)目后,選中第二個(gè)
3.點(diǎn)擊更多操作里面的編輯,注意前綴的設(shè)置，后面的命名不能和element里面的發(fā)生沖突
4.設(shè)置后保存代碼到本地,然后解壓到項(xiàng)目里,并對(duì)里面的iconfont.css文件進(jìn)行修改
5.在iconfont.css進(jìn)行修改,在文件里添加如下代碼
[class^="el-icon-ump"], [class*=" el-icon-ump"] {
font-family:"fontFamily" !important;
/* 以下內(nèi)容參照第三方圖標(biāo)庫(kù)本身的規(guī)則 */
font-size: 18px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
6.添加之后在main.js引入圖標(biāo)
import "./assets/icon/iconfont.css";
7.在你需要引入圖標(biāo)的地方直接使用即可.
總結(jié)
以上所述是小編給大家介紹的vue element項(xiàng)目引入icon圖標(biāo)的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要分享的是vue中的局部過濾器和全局過濾器代碼實(shí)操，下面文章主要以代碼展現(xiàn)，具有一的的知識(shí)參考性，需要的小伙伴可以參考一下2022-02-02
本文主要介紹了淺談Vue灰度發(fā)布新功能的使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
詳解Vue內(nèi)部怎樣處理props選項(xiàng)的多種寫法
這篇文章主要介紹了詳解Vue內(nèi)部怎樣處理props選項(xiàng)的多種寫法，詳細(xì)的介紹了props的使用的寫法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了Vue中組件的緩存，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Nuxt.js之自動(dòng)路由原理的實(shí)現(xiàn)方法
這篇文章主要介紹了Nuxt.js之自動(dòng)路由原理的實(shí)現(xiàn)方法，nuxt.js會(huì)根據(jù)pages目錄結(jié)構(gòu)自動(dòng)生成vue-router模塊的路由配置。非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11
Vue3?setup的注意點(diǎn)及watch監(jiān)視屬性的六種情況分析
這篇文章主要介紹了Vue3?setup的注意點(diǎn)及watch監(jiān)視屬性的六種情況,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
Vue3實(shí)現(xiàn)clipboard復(fù)制的使用示例
在日常開發(fā)中,為用戶提供復(fù)制文本功能的需求比較常見,下面介紹一款vue3可用的插件,可以快速實(shí)現(xiàn)這個(gè)功能,感興趣的可以了解一下2023-11-11
本文章向大家介紹vue組件中的數(shù)據(jù)共享，主要包括vue組件中的數(shù)據(jù)共享使用實(shí)例、應(yīng)用技巧、基本知識(shí)點(diǎn)總結(jié)和需要注意事項(xiàng)，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-11-11
這篇文章主要介紹了Nuxt的路由配置和參數(shù)傳遞方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue+Element UI 實(shí)現(xiàn)視頻上傳功能
這篇文章主要介紹了Vue+Element UI 實(shí)現(xiàn)視頻上傳功能,前臺(tái)使用Vue+Element UI中的el-upload組件實(shí)現(xiàn)視頻上傳及進(jìn)度條展示，后臺(tái)提供視頻上傳API并返回URL，具體實(shí)現(xiàn)代碼及效果展示跟隨小編一起看看吧2022-01-01