Vue Element使用icon表徵圖教程詳解(第三方)，vueicon

Vue Element使用icon表徵圖教程詳解(第三方)，vueicon

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內建的使用方法一樣

 

最後效果:

 

總結

以上所述是小編給大家介紹的Vue Element使用icon表徵圖教程詳解，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！