快捷導(dǎo)航

element使用自定義icon圖標(biāo)的詳細(xì)步驟

更新時(shí)間：2022年11月14日 16:21:16 作者：小堅(jiān)果_

前端經(jīng)常會(huì)用到UI提供的各種圖表,推薦阿里的圖標(biāo)庫(kù),下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的詳細(xì)步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

寫(xiě)項(xiàng)目時(shí)，發(fā)現(xiàn) element 里的圖標(biāo)沒(méi)有我需要的圖標(biāo)，

兩種情況：

① 簡(jiǎn)單的替換小圖標(biāo)，沒(méi)有選中變色等要求

② 有選中變色等要求，稍微復(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)擊之后的不顯示，沒(méi)有選中變色等要求的話(huà)可以使用，有選中要求不推薦）

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

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

效果：

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

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

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

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

第二步：在第一步點(diǎn)擊上邊的購(gòu)物車(chē)之后，彈出下面的頁(yè)面，點(diǎn)擊添加至項(xiàng)目

第三步：在第二步點(diǎn)擊添加至項(xiàng)目之后，如下圖所示，如果有項(xiàng)目直接點(diǎn)擊確定就可以，如果沒(méi)項(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，（路徑寫(xiě)你文件夾所在的路徑）

最后：需要在 iconfont 中選中Font class 然后復(fù)制這個(gè)圖標(biāo)名進(jìn)行使用，如下圖所示操作

在項(xiàng)目中需要的地方粘貼上就可以了

完成啦

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

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

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