寫項(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;
}

第二種情況解決辦法：（有兩種  ① ②）

 ①：（這種是用 ui切的圖  用的圖片，缺點(diǎn)是：  火狐點(diǎn)擊之后的不顯示，沒有選中變色等要求的話可以使用，有選中要求不推薦）

最關(guān)鍵的是css里下面的這兩行代碼

.is-active .menu_src {
  filter: drop-shadow(1000px 0 0 #fff); // 顏色寫你需要的顏色
  transform: translate(-1000px);
}

效果：

②：這就需要去阿里巴巴圖標(biāo)矢量庫(kù)找到需要的圖標(biāo)了，（最后邊講解  上傳自己圖標(biāo)的方法，如果在矢量庫(kù)沒找到需要的，可以自己上傳ui給你的圖標(biāo)）

阿里巴巴圖標(biāo)矢量庫(kù) :      https://www.iconfont.cn/collections/index

如果沒有登錄，請(qǐng)先登錄（我一般用微博登錄），如果沒有注冊(cè)，按著 步驟注冊(cè)就可以了，登錄完成就可以走下邊的步驟

第一步：選中你需要的圖標(biāo)，點(diǎn)擊添加購(gòu)物車，添加之后再點(diǎn)擊上邊的購(gòu)物車，步驟如下圖所示

第二步：在第一步點(diǎn)擊上邊的購(gòu)物車之后，彈出下面的頁(yè)面，點(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)目中需要的地方粘貼上就可以了

完成啦

附贈(zèng)：（自定義圖片上傳圖標(biāo)）

如果整個(gè)阿里巴巴圖標(biāo)矢量庫(kù)  都沒找到你需要的圖標(biāo)，你可以上傳自己的圖片到項(xiàng)目，上傳之后，圖標(biāo)相當(dāng)于有了，就可以按照上邊的步驟添加至項(xiàng)目了，下面簡(jiǎn)單說一下如何上傳自定義圖標(biāo)。

注：上傳的圖片必須是svg格式?。?！

然后就跟上邊第一步一樣了

總結(jié)

到此這篇關(guān)于element使用自定義icon圖標(biāo)的文章就介紹到這了,更多相關(guān)element自定義icon圖標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論