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

兩種情況：

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

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

第一種情況解決辦法：

 修改Element UI自帶的小圖標(biāo)，替換成自己的

 首先找到那個自帶的圖標(biāo)class，然后代碼如下

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

第二種情況解決辦法：

 這就需要去阿里巴巴圖標(biāo)矢量庫找到需要的圖標(biāo)了

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

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

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

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

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

   第四步：在第三步點(diǎn)擊之后，如下圖所示

   第五步：在上邊點(diǎn)擊確定之后彈出如下界面

  第六步：按下圖操作

   第七步：點(diǎn)擊項目中設(shè)置之后彈出 如下界面

   第八步：對內(nèi)容稍作修改，如下圖所示

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

        2、將 Font Family 是 element-icons

 修改完如下圖所示

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

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

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

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

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

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

 完成啦

總結(jié)

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

最新評論