Vue Element使用icon圖標教程詳解(第三方)

更新時間：2018年02月07日 13:35:11 作者：方丈先生

element-ui自帶的圖標庫不夠全，還是需要需要引入第三方icon。下面小編給大家?guī)砹薞ue Element使用icon圖標教程，感興趣的朋友一起看看吧

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

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

教程：

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

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

新建項目

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

設(shè)置完，點新建

注意前綴。設(shè)置完，點新建

現(xiàn)在我們返回阿里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加入購物車

點頁面上的購物車

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

把圖標都添加到剛才創(chuàng)建的項目里

添加

設(shè)置fontClass,然后下載到本地

下載到本地，解壓

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

將以下代碼加進去，注意： el-icon-third 是你之前設(shè)置的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; }

綠框的數(shù)據(jù)保持一致就好

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

在main.js里邊把css引進來

記得引進來

然后重新npm run dev 一下

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

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

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

最后效果:

總結(jié)

以上所述是小編給大家介紹的Vue Element使用icon圖標教程詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue如何使用window.open打開頁面并拼接參數(shù)
這篇文章主要介紹了vue如何使用window.open打開頁面并拼接參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
詳解Vue3中偵聽器watch的使用教程
學過 vue2 的小伙伴們肯定學習過偵聽器，主要是用來監(jiān)聽頁面數(shù)據(jù)或者是路由的變化，來執(zhí)行相應(yīng)的操作，在 vue3里面呢，也有偵聽器的用法，功能基本一樣,本文就來為大家詳細講講
2022-07-07
Vue 無限滾動加載指令實現(xiàn)方法
這篇文章主要介紹了Vue 無限滾動加載指令的實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2019-05-05
Vue?通過this.$emit()方法子組件向父組件傳值(步驟分享)
這篇文章主要介紹了Vue?this.$emit()方法通過子組件向父組件傳值,第一步在父組件中引入子組件，第二步子組件向父組件傳值，本文通過需要的朋友可以參考下
2022-11-11
vue路由跳轉(zhuǎn)時判斷用戶是否登錄功能的實現(xiàn)
下面小編就為大家?guī)硪黄獀ue路由跳轉(zhuǎn)時判斷用戶是否登錄功能的實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
vue中非父子組件的通信你了解嗎
這篇文章主要為大家詳細介紹了vue中非父子組件通信，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
ElementUI表單驗證validate和validateField的使用及區(qū)別
Element-UI作為前端框架,最常使用到的就是表單驗證,下面這篇文章主要給大家介紹了關(guān)于ElementUI表單驗證validate和validateField的使用及區(qū)別,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-02-02
Vue頁面生成PDF的最佳方法推薦
公眾中經(jīng)常會有這種場景,一些合同、協(xié)議等的頁面需要進行下載,而且需要和頁面保持一致,下面這篇文章主要給大家介紹了關(guān)于Vue頁面生成PDF的最佳方法,需要的朋友可以參考下
2022-05-05
關(guān)于vue屬性使用和不使用冒號的區(qū)別說明
這篇文章主要介紹了關(guān)于vue屬性使用和不使用冒號的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
詳解vue-router基本使用
本篇文章主要介紹了詳解vue-router基本使用，詳細的介紹了vue-router的概念和用法，有興趣的可以了解一下。
2017-04-04