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