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自帶的使用方法同樣

 

最後效果:

 

無論你懂了沒有，反正我是懂了

做者：方丈先生 連接：https://www.jianshu.com/p/59dd28f0b9c9 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。