Vue中使用ElementUI使用第三方圖標(biāo)庫iconfont的示例
更新時(shí)間：2018年10月11日 11:03:05 作者：無雙孟堂
這篇文章主要介紹了Vue中使用ElementUI使用第三方圖標(biāo)庫iconfont的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
1.在http://www.iconfont.cn/阿里巴巴圖標(biāo)庫添加圖標(biāo)到自己項(xiàng)目中，然后點(diǎn)擊更多項(xiàng)目中的編輯項(xiàng)目
2.修改前綴為el-icon-xxx，xxx自定義，然后將項(xiàng)目下載自本地
3.將這5個(gè)文件放入到項(xiàng)目文件中，將iconfont.css引入到Vue項(xiàng)目中，
然后修改iconfont.css的.iconfont處，將其修改為下圖所示
4.修改iconfont.css后，大致如下圖所示
5.最后就可以采用icon相同方式引入圖標(biāo)，如下圖方式引用即可
注意：如果修改前綴為el-icon引入，可能會(huì)導(dǎo)致與element-ui的icon沖突導(dǎo)致顯示異常。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue用addRoutes實(shí)現(xiàn)動(dòng)態(tài)路由的示例
本篇文章主要介紹了vue用addRoutes實(shí)現(xiàn)動(dòng)態(tài)路由的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
npm?install時(shí)卡住不動(dòng)的五種解決方法
在我們安裝完Node.js之后,需要使用npm命令來安裝一些工具,下面這篇文章主要給大家介紹了關(guān)于npm?install時(shí)卡住不動(dòng)的五種解決方法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue2.0 實(shí)現(xiàn)富文本編輯器功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了關(guān)于全局安裝vue-cli遇到的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Axios?是一個(gè)簡單的基于?promise?的?HTTP?客戶端，適用于瀏覽器和?node.js。Axios?在具有非?？蓴U(kuò)展的接口的小包中提供了一個(gè)簡單易用的庫，這篇文章主要介紹了vue3-HTTP請求之a(chǎn)xios,需要的朋友可以參考下2022-12-12
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用。2017-03-03
這篇文章主要為大家詳細(xì)介紹了使用Vue實(shí)現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
本文主要介紹了Vue 中頁面?zhèn)髦档亩喾N方式小結(jié),主要包括路由傳參、Vuex 狀態(tài)管理、Props 屬性和事件傳遞數(shù)據(jù)這幾種,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
vue使用 better-scroll的參數(shù)和方法詳解
這篇文章主要介紹了vue使用 better-scroll的參數(shù)和方法詳解,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
Vue2?響應(yīng)式系統(tǒng)之?dāng)?shù)組
這篇文章主要介紹了Vue2?響應(yīng)式系統(tǒng)之?dāng)?shù)組，本文接著上幾篇文章Vue2響應(yīng)式系統(tǒng)?、Vue2?響應(yīng)式系統(tǒng)之分支切換，響應(yīng)式系統(tǒng)之嵌套、響應(yīng)式系統(tǒng)之深度響應(yīng)?展開相關(guān)內(nèi)容,需要的朋友可以參考一下2022-04-04