element使用自定義icon圖標(biāo)的兩種解決方式
寫項(xiàng)目時(shí)，發(fā)現(xiàn) element 里的圖標(biāo)沒有我需要的圖標(biāo)，
兩種情況：
① 簡(jiǎn)單的替換小圖標(biāo)，沒有選中變色等要求
② 有選中變色等要求，稍微復(fù)雜的需求
第一種情況解決辦法：
修改Element UI自帶的小圖標(biāo)，替換成自己的
首先找到那個(gè)自帶的圖標(biāo)class，然后代碼如下
.el-icon-sunrise {
background: url('你的圖片路徑') center center no-repeat;
background-size: 24px;
}
.el-icon-sunrise:before {
content: "11";
visibility: hidden;
}第二種情況解決辦法：
這就需要去阿里巴巴圖標(biāo)矢量庫找到需要的圖標(biāo)了
阿里巴巴圖標(biāo)矢量庫 : https://www.iconfont.cn/collections/index
如果沒有登錄，請(qǐng)先登錄（我一般用微博登錄），如果沒有注冊(cè)，按著 步驟注冊(cè)就可以了，登錄完成就可以走下邊的步驟
第一步：選中你需要的圖標(biāo)，點(diǎn)擊添加購物車，添加之后再點(diǎn)擊上邊的購物車，步驟如下圖所示
第二步：在第一步點(diǎn)擊上邊的購物車之后，彈出下面的頁面，點(diǎn)擊添加至項(xiàng)目
第三步：在第二步點(diǎn)擊 添加至項(xiàng)目 之后，如下圖所示，如果有項(xiàng)目直接點(diǎn)擊確定就可以，如果沒項(xiàng)目 ，點(diǎn)擊圖上顯示的地方
第四步：在第三步點(diǎn)擊之后，如下圖所示
第五步：在上邊點(diǎn)擊確定之后彈出如下界面
第六步：按下圖操作
第七步：點(diǎn)擊項(xiàng)目中設(shè)置之后彈出 如下界面
第八步：對(duì)內(nèi)容稍作修改，如下圖所示
1、將 FontClass/Symbol 前綴 修改 el-icon-
2、將 Font Family 是 element-icons
修改完如下圖所示
第九步：點(diǎn)擊保存，就會(huì)跳到下圖所示的界面，點(diǎn)擊下載至本地
第十步：下載完成后會(huì)是一個(gè)壓縮包 解壓至你要用此圖標(biāo)的項(xiàng)目文件夾
文件夾里面是這樣，等會(huì)需要引入iconfont.css
下一步：需要在main.js中引入此文件夾中的iconfont.css，（路徑寫你文件夾所在的路徑）
最后：需要在 iconfont 中選中Font class 然后復(fù)制這個(gè)圖標(biāo)名進(jìn)行使用，如下圖所示操作
在項(xiàng)目中需要的地方粘貼上就可以了
完成啦
總結(jié)
到此這篇關(guān)于element使用自定義icon圖標(biāo)的文章就介紹到這了,更多相關(guān)element自定義icon圖標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
echarts設(shè)置tootip輪播切換展示(vue3搭配vue-echarts粘貼即用)
這篇文章主要為大家介紹了echarts設(shè)置tootip輪播切換展示效果,vue3搭配vue-echarts粘貼即用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2023-10-10
這篇文章主要給大家介紹了關(guān)于你不可不知的Vue.js列表渲染的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue+element-ui+sortable.js實(shí)現(xiàn)表格拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue+element-ui+sortable.js實(shí)現(xiàn)表格拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
在工作中遇到N次input無法輸入的問題,所以下面這篇文章主要給大家介紹了關(guān)于vue?el-input輸入框輸入不了的解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
關(guān)于Element-ui中table默認(rèn)選中toggleRowSelection問題
這篇文章主要介紹了關(guān)于Element-ui中table默認(rèn)選中toggleRowSelection問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue實(shí)現(xiàn)禁止瀏覽器記住密碼功能的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)禁止瀏覽器記住密碼功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
解決vue bus.$emit觸發(fā)第一次$on監(jiān)聽不到問題
這篇文章主要介紹了解決vue bus.$emit觸發(fā)第一次$on監(jiān)聽不到問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue如何自定義組件v-model問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue+Jwt+SpringBoot+Ldap完成登錄認(rèn)證的示例代碼
本篇文章主要介紹了Vue+Jwt+SpringBoot+Ldap完成登錄認(rèn)證的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Taro+vue3?實(shí)現(xiàn)電影切換列表功能
我們做類似于貓眼電影的小程序或者H5?的時(shí)候?我們會(huì)做到那種?左右滑動(dòng)的電影列表,這種列表一般帶有電影場(chǎng)次,我這個(gè)項(xiàng)目是基于Taro?+vue3?+ts?來寫的用的組件庫也是京東的nut-ui以上的代碼和組件也有的是我二次封裝的組件,對(duì)vue3電影切換列表知識(shí),感興趣的朋友一起看看吧2024-01-01