在Vue中透過Element使用icon圖標

element-ui自帶的圖示庫不夠全，還是需要需要引入第三方icon。下面我帶了Vue Element使用icon圖標教程，有興趣的朋友一起看看吧

element-ui自帶的圖標庫還是不夠全，還是需要需要引入第三方icon，自己在用的時候一直有些問題，參考了些教程，詳細記錄補充下

#對於我們來說，首選的當然是阿里icon庫

##教程：

1.開啟阿里icon，註冊>登入>圖示管理>我的專案

 

圖示管理>我的項目，點進去

新建項目

 

新項目

項目名稱隨便寫。前綴注意，不要跟element-ui自帶的icon(前綴為：el-icon)重名了。

設定完，點新建

 

注意前綴。設定完，點新建

現在我們回到阿里icon首頁，點進去你想要的icon庫，因為沒有批量導入購物車，所以一般情況下需要一個一個去點，太浪費時間，那麼請在控制台輸入以下程式碼，批次導入

var icons = document.querySelectorAll('.icon-gouwuche1');
 var auto_click = function(i) { if (i < icons.length) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } };
auto_click(0);

 

然後點擊回車，他會把這套圖庫所有icon加入購物車

點頁面上的購物車

 

頁面右邊的購物車圖標，點擊

把圖標都加到剛才創建的項目裡

 

新增

設定fontClass,然後下載到本機

 

#下載到本機，解壓縮

解壓縮後你會得到這些文件，打開圖中圈中的文件

將以下程式碼加進去，注意： el-icon-third 是你之前設定的icon前綴，第二個el-icon-third前邊有空格的

 [class^="el-icon-third"], [class*=" el-icon-third"]/*这里有空格*/
 { font-family: "iconfont" !important;
 font-size: 16px;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale; }

 

綠框的資料保持一致就好

2.上邊設定好以後，打開vue項目，我是在src-assets下創建了icon資料夾，將所有的檔案複製了過來

在main.js裡邊把css引進來

## 

記得引進來

然後重新

npm run dev

一下3.打開在阿里icon的項目，複製你想要的圖示程式碼

## 

圖示程式碼：el-icon-ump-qianniudaidise

使用，兩種引用方式，跟element自帶的使用方法一樣

 

#最後效果:

 

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

jQuery如何實作圖片輪播

#jQuery 如何防止相同的事件快速重複觸發的方法

使用AnglarJs實作上拉載入

#

以上是在Vue中透過Element使用icon圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章！