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