在上一篇文章中介紹了如何在vue項目中使用vue-awesome，如果你想了解，請移步《vue項目中使用vue-awesome》
這里介紹一下vue項目中如何使用阿里的iconfont圖標庫，先看一下官網
可以看到有將近兩百萬的圖標量，可以說我們想要的矢量圖圖標這里大部分都是有的，下面直接開始如何在vue項目中使用，方法有兩種
方法一：簡單粗暴法
1.打開 iconFont官網 選擇自己喜歡的圖標，並且添加購物車
例如我現在選擇三個圖標
點擊購物車，添加至項目
為了方便可以給項目起一個名字
選擇Font class
點擊“暫無代碼，點此生成”
就會出現我們的鏈接
接下來復制鏈接地址，在我們的vue項目中，找到index.html文件，引入css樣式，記住這里要放上你的鏈接地址....
<link rel="stylesheet" href="//at.alicdn.com/t/font_528709_jntwl1twn4yj5rk9.css">
接下來我們就可以在任何組件地方使用我們的圖標了,我這里就是用上面生成的三個圖標其中的一個。
<i class="iconfont icon-zitigui-xianxing"></i>
是不是很簡單？？？！！
第二種方法：
第一種是很簡單，可是如果我們的客戶不能鏈接外網或者突然間沒有網速等情況怎么辦？？前端為了客戶體驗而生（這里感謝喬布斯，讓客戶體驗越來越重要）
所以，我們要使用第二種，下載到本地
接着上面的步驟，我們先把之前在index.js文件下link進去的樣式給取消（一定要取消），然后點擊下載到本地
解壓我們下載好的文件，可以看到文件里面總共有10個文件，三個demo.html等等
在vue項目中創建iconfont文件夾，把我們下載好的文件iconfont.css和iconfont.ttf放到該文件夾下
當然也可以放在不同的文件夾下，但是需要注意的是必須修改iconfont.css src引入的字體路徑，現在默認的是絕對路徑。至於路徑如何對應，這點大家都知道
然后就可以全局引入，在main.js中引入iconfont.css樣式
import './assets/iconfont/iconfont.css'（這是我的文件路徑，如果在不同的項目下需要注意）
import 'xxx/xxx/xxx/iconfont.css'
在組件中使用方法就和方法1一樣了。
這里可能會報錯
需要下載css-loader依賴包
npm install css-loader --save
ok！！！