先來說說字體圖標的好處：
很容易任意地縮放；
很容易地改變顏色；
很容易地產生陰影；
可以擁有透明效果；
一般來說，有先進的瀏覽器支持；
可以使用CSS來裝飾（可以得到CSS很好支持）；
可以快速轉化形態（做出一些變化，如 :hover等）；
可以做出跟圖片一樣可以做的事情（改變透明度、旋轉度，等）；
本身體積更小，但攜帶的信息並沒有削減。
現在大多項目中都很熱衷於字體圖標，對我們項目優化的好處不止一點點，很多時候，我們會先把需要的字體圖標制作好再拷貝到項目中使用，這樣會帶來一個問題，當要增加和刪除某些字體圖標時，又需要重新制作一遍，這樣並不是很方便， 現在阿里的iconfont字體圖標庫給我們提供了很好的解決方案，本文來簡單介紹一下。
一、創建字體圖標項目
1.首先登錄icon字體圖標官方網站：
http://www.iconfont.cn/ ，在導航欄>圖標管理>選擇我的項目，並新建一個項目：
2.挑選我們需要的字體圖標，添加到購物車，也可以上傳我們自己的字體圖標到iconfont，選擇好后，直接添加到剛才創建的項目：
3.現在已經擁有了自己的項目，iconfont提供了三種引用方式，這里推薦使用第二種 font class , 使用比較方便，具體區別，在右側使用幫助中有介紹；
<
link
rel
=
"stylesheet"
href
=
"http://at.alicdn.com/t/fo********ym9nsc2j2d42t9.css"
>
<
template
>
<
div
id
=
"app"
>
<
img
src
=
"./assets/logo.png"
>
<
i
class
=
"iconfont icon-xihuan"
></
i
>
<
router-view
/>
</
div
>
</
template
>
現在就可以很方便的使用字體圖標項目了，直接link 項目提供的外部地址，就可以愉快的開始玩耍了。其實寫本文主要的原因，是在vue-cli使用字體圖標項目時，發現打包后的字體圖標並沒有生效，解決辦法也很簡單，在項目提供的外部鏈接加上請求方式 "http:" 就可以了。