在Vue中使用icon 字體圖標

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>

4使用IconMoon

挺好用 iconMoon能夠生成本身的矢量圖，這點是我喜歡的
1.若是想要直接使用它們自帶的官方圖標
選擇咱們想要的圖標以後，點擊右下角的Generate Font F

這時會看到咱們已經選擇的圖標，在這裏能夠修更名稱等，而後點擊右下角的下載
2接下來在vue項目中建立文件夾，打開style.css樣式，修改引入字體的路徑（不一樣路徑寫的方式不同，須要注意）

3在main.js中全局引入
import '@/assets/css/icomoon/style.css'

若是想要使用咱們本身畫的.svg格式的矢量圖圖標，點擊Import Icons
導入咱們本地的.svg格式的圖標（注意，矢量圖是用矢量線畫的，png,jpg等使用像素來的，不能夠直接用png轉成svg格式，不然不成功）
引入以後，接來下就和上面的步驟同樣了。
4直接使用