在iview+vue項目中使用自定義icon圖標方式
更新時間：2022年04月02日 09:18:57 作者：池中飛雪
這篇文章主要介紹了在iview+vue項目中使用自定義icon圖標方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
最近做一個后臺管理系統(tǒng)，是用iview+vue cli2做的，在做的過程中需要將左側(cè)的導航欄加入icon圖標，但是iview庫里的圖標和UI要求不符，這就需要引入自己的圖標庫。
1. UI設(shè)計師會把自己做的圖標庫上傳到阿里巴巴圖標庫
打開設(shè)計師給的圖標庫地址，把所有要用到的圖標點擊加入購物車
2. 到購物車中點擊添加至項目
3. 給項目起個名字
點擊確定，然后點擊下載至本地
4. 把下面這些文件放到我的項目的static中
新建文件夾iconfont中
5. 在main.js中全局引入iconfont.css
6. 打開剛才下載好的文件里的demo_index.html
里面有三種形式的引用方式，我用的是class的方式，直接復制下面的class名即可
7. 在我的路由中加入icon配置
我以為能夠正常顯示了，發(fā)現(xiàn)根本就沒顯示出來
8. 看結(jié)構(gòu)才發(fā)現(xiàn)font-family還是默認的iview設(shè)置好的
而自己引入的圖標需要設(shè)置成 font-family: 'iconfont'
9. 所以要改變font-family的設(shè)置
注意這里不能再全局設(shè)置，開始我全局設(shè)置導致其他iview圖標也會不顯示，所以要找到左側(cè)導航欄對應的文件，在其對應的結(jié)構(gòu)中加入行內(nèi)樣式
10. 這樣就完美的解決了
既能在左側(cè)引入自定義圖標也不會影響其他地方使用的iview圖標
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE獲取Promise對象中PromiseResult中的數(shù)據(jù)(最新推薦)
如果想要在接口請求方法的外面拿到請求的結(jié)果,再做相關(guān)數(shù)據(jù)處理,往往我們拿到的卻是一個Promise對象,那么遇到這樣的問題如何解決呢,下面小編給大家?guī)砹薞UE?項目中?如何獲取Promise對象中的PromiseResult中的數(shù)據(jù)?,感興趣的朋友一起看看吧2023-10-10
在現(xiàn)代前端開發(fā)中,Vue.js憑借其輕量級和易用性,成為了很多開發(fā)者的首選框架,本文將結(jié)合實際案例,詳細講解Vue-Router路由懶加載的用法,需要的可以參考下2024-11-11
這篇文章主要介紹了vue 圖片裁剪上傳組件的實現(xiàn)，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
本篇文章主要介紹了深入理解Vue生命周期和手動掛載，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue引入highCharts實現(xiàn)數(shù)據(jù)可視化
這篇文章主要為大家詳細介紹了Vue引入highCharts實現(xiàn)數(shù)據(jù)可視化，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue elementui select標簽監(jiān)聽change事件失效問題
這篇文章主要介紹了vue elementui select標簽監(jiān)聽change事件失效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
在組件化開發(fā)的過程中難免會遇見子組件和父組件之間的通訊那么這里講關(guān)于vue2和vue3不同的通訊方式，文中有詳細的代碼示例供大家參考，感興趣的同學可以閱讀下2023-05-05
這篇文章主要給大家介紹了關(guān)于Vue的組件中data選項為什么必須是函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-08-08
這篇文章主要為大家介紹了Vue3啟用gzip壓縮時nginx配置gzip示例詳解詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
Vs-code/WebStorm中構(gòu)建Vue項目的實現(xiàn)步驟
本文主要介紹了在Vs-code/WebStorm中構(gòu)建Vue項目，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08