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)目,如果沒(méi)有項(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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue登錄頁(yè)面設(shè)置驗(yàn)證碼input框的方法
這篇文章主要為大家詳細(xì)介紹了vue登錄頁(yè)面設(shè)置驗(yàn)證碼input框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue2和vue3的區(qū)別,較為詳細(xì)的分析了vue2與vue3的常見(jiàn)區(qū)別與使用方法,需要的朋友可以參考下2023-06-06
vue-cli 3.0 引入mint-ui報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了vue-cli 3.0 引入mint-ui報(bào)錯(cuò)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
使用Element-UI的NavMenu如何隱藏自帶的小箭頭
這篇文章主要介紹了使用Element-UI的NavMenu如何隱藏自帶的小箭頭問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家詳細(xì)介紹了vue滑動(dòng)解鎖組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
詳解本地Vue項(xiàng)目請(qǐng)求本地Node.js服務(wù)器的配置方法
本文只針對(duì)自己需要本地模擬接口于是搭建一個(gè)本地node服務(wù)器供自己測(cè)試使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
vue?實(shí)現(xiàn)左滑圖片驗(yàn)證功能
網(wǎng)頁(yè)中滑動(dòng)圖片驗(yàn)證一直是各大網(wǎng)站、移動(dòng)端的主流校驗(yàn)方式，其主要作用是為了區(qū)分人和機(jī)器以及為了防止機(jī)器人程序暴力登錄或攻擊從而設(shè)置的一種安全保護(hù)方式，這篇文章主要介紹了vue?實(shí)現(xiàn)左滑圖片驗(yàn)證,需要的朋友可以參考下2023-04-04
Vue向下滾動(dòng)加載更多數(shù)據(jù)scroll案例詳解
這篇文章主要介紹了Vue向下滾動(dòng)加載更多數(shù)據(jù)scroll案例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-08-08
這篇文章主要介紹了Vue父子模版?zhèn)髦导敖M件傳值的三種方法,需要的朋友可以參考下2017-11-11
vue中js判斷長(zhǎng)時(shí)間不操作界面自動(dòng)退出登錄(推薦)
這篇文章主要介紹了vue中js判斷長(zhǎng)時(shí)間不操作界面自動(dòng)退出登錄,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01