1.使用線上的阿里iconfont圖標庫

1.打開 iconFont官網 選擇自己喜歡的圖標，并且添加購物車

2.點擊購物車，添加至項目

3 生成鏈接

4在我們的vue項目中，找到index.html文件，引入css樣式，記住這里要放上你的鏈接地址

5接下來我們就可以在任何組件地方使用我們的圖標了,我這里就是用上面生成的三個圖標其中的一個。

2但是考慮網絡及用戶體驗 阿里iconfont下載本地使用

1 阿里iconfont圖標直接下載到本地

2 在assets文件下創建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 字體圖標的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！