Vue Element使用icon圖標(biāo)教程詳解(第三方)
element-ui自帶的圖標(biāo)庫還是不夠全，還是需要需要引入第三方icon，自己在用的時候一直有些問題，參考了些教程，詳細地記錄補充下
對于我們來說，首選的當(dāng)然是阿里icon庫
教程：
1.打開阿里icon，注冊 >登錄>圖標(biāo)管理>我的項目
圖標(biāo)管理>我的項目，點進去
新建項目
新建項目
項目名稱隨便寫。前綴注意，不要跟element-ui自帶的icon(前綴為：el-icon)重名了。
設(shè)置完，點新建
注意前綴。設(shè)置完，點新建
現(xiàn)在我們返回阿里icon首頁，點進去你想要的icon庫，因為沒有批量導(dǎo)入購物車，所以一般情況下需要一個一個去點，太浪費時間，那么請在控制臺輸入以下代碼，批量導(dǎo)入
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加入購物車
點頁面上的購物車
頁面右邊的購物車圖標(biāo)，點擊
把圖標(biāo)都添加到剛才創(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文件夾，將所有的文件復(fù)制了過來
在main.js里邊把css引進來
記得引進來
然后重新npm run dev 一下
3.打開在阿里icon的項目，復(fù)制你想要的圖標(biāo)代碼
圖標(biāo)代碼：el-icon-ump-qianniudaidise
使用，兩種引用方式，跟element自帶的使用方法一樣
最后效果:
總結(jié)
以上所述是小編給大家介紹的Vue Element使用icon圖標(biāo)教程詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- Vue elementui字體圖標(biāo)顯示問題解決方案
- 詳解Vue+elementUI build打包部署后字體圖標(biāo)丟失問題
- vue+elementUi 實現(xiàn)密碼顯示/隱藏+小圖標(biāo)變化功能
- Vue中使用ElementUI使用第三方圖標(biāo)庫iconfont的示例
- vue element項目引入icon圖標(biāo)的方法
- 詳解Vue ElementUI手動上傳excel文件到服務(wù)器
- 總結(jié)Vue Element UI使用中遇到的問題
- vue+element開發(fā)一個谷歌插件的全過程
- 使用vue-element-admin框架從后端動態(tài)獲取菜單功能的實現(xiàn)
- Vue Element前端應(yīng)用開發(fā)之圖標(biāo)的維護和使用
相關(guān)文章
iview+vue實現(xiàn)導(dǎo)入EXCEL預(yù)覽功能
這篇文章主要為大家詳細介紹了iview+vue實現(xiàn)導(dǎo)入EXCEL預(yù)覽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
vue3如何實現(xiàn)表格內(nèi)容無縫滾動(又寫了一堆冗余代碼)
這篇文章主要給大家介紹了關(guān)于vue3如何實現(xiàn)表格內(nèi)容無縫滾動的相關(guān)資料,在Vue3項目中難免會遇到讓列表滾動的需求,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
公司使用 vue-cli 創(chuàng)建的 vue項目 在初始化時并沒有做多頁面配置，隨著需求的不斷增加，發(fā)現(xiàn)有必要使用多頁面配置。這篇文章主要介紹了vue項目添加多頁面配置,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue引入部分element.ui組件的一些小坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了詳解Vue.js和layui日期控件沖突問題解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
最近公司開發(fā)一個項目,采用的前后端分離的方式,前端采用vue,但是再項目開發(fā)過程中遇到一個比較麻煩的問題,下面這篇文章主要給大家介紹了關(guān)于vue?ui的安裝步驟以及使用的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue項目中input輸入框輸入不了值問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Arco Design 作為一款專為 Vue3 打造的企業(yè)級 UI 組件庫,以其豐富的特性和卓越的性能,成為現(xiàn)代 Web 應(yīng)用開發(fā)者值得關(guān)注的選擇,這篇文章主要介紹了Vue3 框架Arco Design詳解,需要的朋友可以參考下2024-08-08
Vue2+marked.js實現(xiàn)AI流式輸出的項目實踐
本文主要介紹了Vue2+marked.js實現(xiàn)AI流式輸出的項目實踐,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04
Vue開發(fā)模式是一種基于Vue.js框架的開發(fā)方式,它可以幫助開發(fā)者更高效地構(gòu)建和維護復(fù)雜的Web應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于vue關(guān)閉開發(fā)模式提示的簡單解決辦法,需要的朋友可以參考下2024-04-04