在iview+vue項目中使用自定義icon圖標(biāo)方式
更新時間：2022年04月02日 09:18:57 作者：池中飛雪
這篇文章主要介紹了在iview+vue項目中使用自定義icon圖標(biāo)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
最近做一個后臺管理系統(tǒng)，是用iview+vue cli2做的，在做的過程中需要將左側(cè)的導(dǎo)航欄加入icon圖標(biāo)，但是iview庫里的圖標(biāo)和UI要求不符，這就需要引入自己的圖標(biāo)庫。
1. UI設(shè)計師會把自己做的圖標(biāo)庫上傳到阿里巴巴圖標(biāo)庫
打開設(shè)計師給的圖標(biāo)庫地址，把所有要用到的圖標(biāo)點擊加入購物車
2. 到購物車中點擊添加至項目
3. 給項目起個名字
點擊確定，然后點擊下載至本地
4. 把下面這些文件放到我的項目的static中
新建文件夾iconfont中
5. 在main.js中全局引入iconfont.css
6. 打開剛才下載好的文件里的demo_index.html
里面有三種形式的引用方式，我用的是class的方式，直接復(fù)制下面的class名即可
7. 在我的路由中加入icon配置
我以為能夠正常顯示了，發(fā)現(xiàn)根本就沒顯示出來
8. 看結(jié)構(gòu)才發(fā)現(xiàn)font-family還是默認(rèn)的iview設(shè)置好的
而自己引入的圖標(biāo)需要設(shè)置成 font-family: 'iconfont'
9. 所以要改變font-family的設(shè)置
注意這里不能再全局設(shè)置，開始我全局設(shè)置導(dǎo)致其他iview圖標(biāo)也會不顯示，所以要找到左側(cè)導(dǎo)航欄對應(yīng)的文件，在其對應(yīng)的結(jié)構(gòu)中加入行內(nèi)樣式
10. 這樣就完美的解決了
既能在左側(cè)引入自定義圖標(biāo)也不會影響其他地方使用的iview圖標(biāo)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
目前前端最流行的網(wǎng)絡(luò)請求庫還是axios,所以對axios的封裝很有必要,下面這篇文章主要給大家介紹了關(guān)于vue3中封裝Axios請求及在組件中使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue實現(xiàn)購物車實例代碼,需要的朋友可以參考下2020-05-05
在Electron 中,存取本地文件,有很多種辦法,本文介紹最常用的一種辦法, 通過 Electron 框架提供的能力,和 Node.js 的 fs 文件管理模塊實現(xiàn)本地文件的存取,需要的小伙伴可以參考下2023-11-11
vue-cli+webpack記事本項目創(chuàng)建
這篇文章主要為大家詳細(xì)介紹了vue-cli+webpack創(chuàng)建記事本項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
axios全局請求參數(shù)設(shè)置,請求及返回攔截器的方法
下面小編就為大家分享一篇axios全局請求參數(shù)設(shè)置,請求及返回攔截器的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
今天小編就為大家分享一篇vue 解決循環(huán)引用組件報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3在單個組件中實現(xiàn)類似mixin的事件調(diào)用
這篇文章主要為大家詳細(xì)介紹了vue3如何在單個組件中實現(xiàn)類似mixin的事件調(diào)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要介紹了vue.js 動態(tài)組件詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
大家都知道vue-router有兩種模式，hash模式和history模式，帶＃的則是hash模式。接下來給大家?guī)砹薞ue 去除路徑中的＃號的解決方法，感興趣的朋友一起看看吧2018-04-04
這篇文章主要介紹了vue動態(tài)添加store、路由和國際化配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03