Vue Element 使用 icon 圖標 (第三方)

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

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

教程:

1. 打開阿里 icon, 注冊 > 登錄 > 圖標管理 > 我的項目

圖標管理 > 我的項目, 點進去

新建項目

新建項目

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

設置完, 點新建

注意前綴設置完, 點新建

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

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

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

點頁面上的購物車

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

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

添加

設置 fontClass, 然后下載到本地

下載到本地, 解壓

解壓后你會得到這些文件, 打開圖中圈中的文件

將以下代碼加進去, 注意: el-icon-third 是你之前設置的 icon 前綴, 第二個 el-icon-third 前邊有空格的

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

綠框的數據保持一致就好

2. 上邊設置好以后, 打開 vue 項目, 我是在 src-assets 下創建了 icon 文件夾, 將所有的文件復制了過來

在 main.js 里邊把 CSS 引進來

記得引進來

然后重新 npm run dev 一下

3. 打開在阿里 icon 的項目, 復制你想要的圖標代碼

圖標代碼: el-icon-ump-qianniudaidise

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

最后效果: