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