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