寫項目時，發(fā)現(xiàn) element 里的圖標沒有我需要的圖標，

兩種情況：

① 簡單的替換小圖標，沒有選中變色等要求

② 有選中變色等要求，稍微復雜的需求

第一種情況解決辦法：

修改Element UI自帶的小圖標，替換成自己的

首先找到那個自帶的圖標class，然后代碼如下

.el-icon-sunrise {
    background: url('你的圖片路徑') center center no-repeat;
    background-size: 24px;
}
 
.el-icon-sunrise:before {
    content: "11";
    visibility: hidden;
}

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

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

最關鍵的是css里下面的這兩行代碼

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

效果：

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

阿里巴巴圖標矢量庫 :      https://www.iconfont.cn/collections/index

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

第一步：選中你需要的圖標，點擊添加購物車，添加之后再點擊上邊的購物車，步驟如下圖所示

第二步：在第一步點擊上邊的購物車之后，彈出下面的頁面，點擊添加至項目

第三步：在第二步點擊 添加至項目 之后，如下圖所示，如果有項目直接點擊確定就可以，如果沒項目 ，點擊圖上顯示的地方

第四步：在第三步點擊之后，如下圖所示

第五步：在上邊點擊確定之后彈出如下界面

第六步：按下圖操作

第七步：點擊項目中設置之后彈出 如下界面

第八步：對內容稍作修改，如下圖所示

 1、將 FontClass/Symbol 前綴 修改  el-icon-

2、將 Font Family 是 element-icons

修改完如下圖所示

第九步：點擊保存，就會跳到下圖所示的界面，點擊下載至本地

第十步：下載完成后會是一個壓縮包 解壓至你要用此圖標的項目文件夾

文件夾里面是這樣，等會需要引入iconfont.css

下一步：需要在main.js中引入此文件夾中的iconfont.css，（路徑寫你文件夾所在的路徑）

最后：需要在 iconfont 中選中Font class 然后復制這個圖標名進行使用，如下圖所示操作

在項目中需要的地方粘貼上就可以了

完成啦

附贈：（自定義圖片上傳圖標）

如果整個阿里巴巴圖標矢量庫  都沒找到你需要的圖標，你可以上傳自己的圖片到項目，上傳之后，圖標相當于有了，就可以按照上邊的步驟添加至項目了，下面簡單說一下如何上傳自定義圖標。

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

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

總結

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

最新評論