在Vue中使用icon 字體圖標(biāo)的方法
1.使用線上的阿里iconfont圖標(biāo)庫
1.打開 iconFont官網(wǎng) 選擇自己喜歡的圖標(biāo)，并且添加購物車
2.點(diǎn)擊購物車，添加至項(xiàng)目
3 生成鏈接
4在我們的vue項(xiàng)目中，找到index.html文件，引入css樣式，記住這里要放上你的鏈接地址
5接下來我們就可以在任何組件地方使用我們的圖標(biāo)了,我這里就是用上面生成的三個(gè)圖標(biāo)其中的一個(gè)。
2但是考慮網(wǎng)絡(luò)及用戶體驗(yàn) 阿里iconfont下載本地使用
1 阿里iconfont圖標(biāo)直接下載到本地
2 在assets文件下創(chuàng)建iconfont文件夾
把這些文件放入文件夾
3 iconfont.css文件中改路徑
4 在main.js中引入iconfont.css文件
5直接使用
3使用vue-awesome
1.首先安裝vue-awesome依賴包
npm install vue-awesome
2.在main.js文件下
在github上可以明確看到如果考慮項(xiàng)目大小，只導(dǎo)入用于減少包大小的圖標(biāo)
import 'vue-awesome/icons/flag'
或者不考慮大小
直接使用
<icon name="beer"></icon>
總結(jié)
以上所述是小編給大家介紹的在Vue中使用icon 字體圖標(biāo)的方法,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
關(guān)于vue3默認(rèn)把所有onSomething當(dāng)作v-on事件綁定的思考
這篇文章主要介紹了關(guān)于vue3默認(rèn)把所有`onSomething`當(dāng)作`v-on`事件綁定的思考,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
在現(xiàn)代社會(huì)中,了解血型遺傳規(guī)律對(duì)于優(yōu)生優(yōu)育、醫(yī)療健康等方面都有重要意義,本文將介紹如何使用Uniapp開發(fā)一個(gè)跨平臺(tái)的血型遺傳查詢工具,幫助用戶預(yù)測(cè)孩子可能的血型,感興趣的朋友一起看看吧2025-04-04
idea編譯器vue縮進(jìn)報(bào)錯(cuò)問題場(chǎng)景分析
idea編譯器出現(xiàn)Vue縮進(jìn)報(bào)錯(cuò)，怎么解決呢，很多朋友遇到這個(gè)問題都很棘手，不知該如何解決，今天小編給大家通過場(chǎng)景分析介紹解決方案，需要的朋友參考下吧2021-07-07
vue+koa2實(shí)現(xiàn)session、token登陸狀態(tài)驗(yàn)證的示例
這篇文章主要介紹了vue+koa2實(shí)現(xiàn)session、token登陸狀態(tài)驗(yàn)證的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue實(shí)現(xiàn)監(jiān)聽數(shù)值的變化，并捕捉到
這篇文章主要介紹了vue實(shí)現(xiàn)監(jiān)聽數(shù)值的變化，并捕捉到問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue實(shí)現(xiàn)無限輪播效果時(shí)動(dòng)態(tài)綁定style失效的解決方法
最近在開發(fā)中遇到了一個(gè)新需求：列表輪播滾動(dòng),實(shí)現(xiàn)方式也有很多,比如使用第三方插件,但是由于不想依賴第三方插件,想自己實(shí)現(xiàn),于是我開始了嘗試,但是在這個(gè)過程中遇到了動(dòng)態(tài)綁定style樣式不生效,所以本文介紹了Vue實(shí)現(xiàn)無限輪播效果時(shí)動(dòng)態(tài)綁定style失效的解決方法2024-08-08
vue項(xiàng)目中如何將當(dāng)前頁面生成圖片
這篇文章主要介紹了vue項(xiàng)目中如何將當(dāng)前頁面生成圖片問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vant-ui組件調(diào)用Dialog彈窗異步關(guān)閉操作
這篇文章主要介紹了vant-ui組件調(diào)用Dialog彈窗異步關(guān)閉操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
解決Vue.js父組件$on無法監(jiān)聽子組件$emit觸發(fā)事件的問題
今天小編就為大家分享一篇解決Vue.js父組件$on無法監(jiān)聽子組件$emit觸發(fā)事件的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
對(duì)插槽的這種改變讓我對(duì)發(fā)現(xiàn)插槽的潛在功能感興趣，以便為我們基于Vue的項(xiàng)目提供可重用性，新功能和更清晰的可讀性。這篇文章主要介紹了vue 2.6 中 slot 的新用法,需要的朋友可以參考下2019-07-07