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