1.在阿裡巴巴圖示庫建立自己的工程,并導入需要的圖示放入項目
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiAzNfRHLGZkRGZkRfJ3bs92YsYTMfVmepNHL0smeOdXSE9kerRkT4Z0MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnLwITN5UDO1kDM0EDNwAjMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
關于如何批量選擇圖示:
F12輸入——
var iconList = document.querySelectorAll('.icon-gouwuche1');
for (var i = 0; i < iconList.length; i++) {
iconList[i].click();
}
2.下載下傳項目至本地
下載下傳解壓後,我們隻需要把除開demo的檔案放進自己的前端項目
在assets目錄下建立icon目錄放入
3.修改iconfont.css檔案
插入代碼
[class^="el-icontp-"], [class*="el-icontp-"] {
font-family:"fontFamily" !important;
/* 以下内容參照第三方圖示庫本身的規則 */
font-size: 18px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
4.引用第三方圖示
我們在main.js檔案中導入iconfont.css 就可以使用第三方圖示庫了
在項目中使用圖示方式 如 我的圖示全稱為el-icontp-addition
class屬性
<el-button size="small" class="el-icontp-addition" @click="handleAdd" style="padding:6px 4px;width: 90px">
新增群組
</el-button>