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