在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ì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了Vue實(shí)現(xiàn)靠邊懸浮球(PC端)效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
關(guān)于Vue?CLI3中啟動(dòng)cli服務(wù)參數(shù)說明
這篇文章主要介紹了關(guān)于Vue?CLI3中啟動(dòng)cli服務(wù)參數(shù)說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+elementui實(shí)現(xiàn)拖住滑塊拼圖驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue+elementui實(shí)現(xiàn)拖住滑塊拼圖驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
ElementUI?$notify通知方法中渲染自定義組件實(shí)現(xiàn)
這篇文章主要為大家介紹了ElementUI?$notify通知方法中渲染自定義組件實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了如何使用vue過濾器filter，對(duì)vue感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要介紹了vue2升級(jí)vue3遇到的問題bug解決分析整理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
vue中v-model如何綁定多循環(huán)表達(dá)式實(shí)戰(zhàn)案例
v-model綁定的變量無論是對(duì)象還是數(shù)組都是綁定的value值,下面這篇文章主要給大家介紹了關(guān)于vue中v-model如何綁定多循環(huán)表達(dá)式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
熱更新全稱Hot Module Reload,常常在構(gòu)建工具里面出現(xiàn),下面這篇文章主要介紹了Vue?Vite熱更新不起作用的正確解決辦法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue歌曲進(jìn)度條demo，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
vue-devtools是一款基于chrome游覽器的插件,用于調(diào)試vue應(yīng)用,這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue-devtools的安裝,需要的朋友可以參考下2023-08-08