在Vue中使用icon 字體圖標(biāo)的方法
更新時間：2019年06月14日 08:29:15 作者：yang
這篇文章主要介紹了在Vue中使用icon 字體圖標(biāo)的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
1.使用線上的阿里iconfont圖標(biāo)庫
1.打開 iconFont官網(wǎng) 選擇自己喜歡的圖標(biāo)，并且添加購物車
2.點擊購物車，添加至項目
3 生成鏈接
4在我們的vue項目中，找到index.html文件，引入css樣式，記住這里要放上你的鏈接地址
5接下來我們就可以在任何組件地方使用我們的圖標(biāo)了,我這里就是用上面生成的三個圖標(biāo)其中的一個。
2但是考慮網(wǎng)絡(luò)及用戶體驗 阿里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上可以明確看到如果考慮項目大小，只導(dǎo)入用于減少包大小的圖標(biāo)
import 'vue-awesome/icons/flag'
或者不考慮大小
直接使用
<icon name="beer"></icon>
總結(jié)
以上所述是小編給大家介紹的在Vue中使用icon 字體圖標(biāo)的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了Vue實現(xiàn)靠邊懸浮球(PC端)效果，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
關(guān)于Vue?CLI3中啟動cli服務(wù)參數(shù)說明
這篇文章主要介紹了關(guān)于Vue?CLI3中啟動cli服務(wù)參數(shù)說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue+elementui實現(xiàn)拖住滑塊拼圖驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
ElementUI?$notify通知方法中渲染自定義組件實現(xiàn)
這篇文章主要為大家介紹了ElementUI?$notify通知方法中渲染自定義組件實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了如何使用vue過濾器filter，對vue感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要介紹了vue2升級vue3遇到的問題bug解決分析整理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
vue中v-model如何綁定多循環(huán)表達(dá)式實戰(zhàn)案例
v-model綁定的變量無論是對象還是數(shù)組都是綁定的value值,下面這篇文章主要給大家介紹了關(guān)于vue中v-model如何綁定多循環(huán)表達(dá)式的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
熱更新全稱Hot Module Reload,常常在構(gòu)建工具里面出現(xiàn),下面這篇文章主要介紹了Vue?Vite熱更新不起作用的正確解決辦法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue歌曲進(jìn)度條demo，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
vue-devtools是一款基于chrome游覽器的插件,用于調(diào)試vue應(yīng)用,這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue-devtools的安裝,需要的朋友可以參考下2023-08-08