element使用自定義icon圖標的兩種解決方式

Posted on by

寫項目時，發現 element 裡的圖標沒有我需要的圖標，

兩種情況：

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

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

第一種情況解決辦法：

 修改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

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

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

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

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

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

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

  第六步：按下圖操作

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

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

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

        2、將 Font Family 是 element-icons

 修改完如下圖所示

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

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

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

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

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

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

 完成啦

總結

到此這篇關於element使用自定義icon圖標的文章就介紹到這瞭,更多相關element自定義icon圖標內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：