前面我在Vue中引用了Font Awesome字體圖標，Font Awesome目前收入了675個圖標（這些是可縮放的矢量圖標,可以通過CSS樣式來改變圖標的大小、顏色、陰影或者其它任何支持的效果），相對element來說還算挺多的，今天我們再來使用一個圖庫更全的方案，那就是阿里提供的iconfont圖標庫，這個是目前國內最為強大的矢量圖標庫中心，裡面含有非常豐富的矢量圖標庫提供下載。
我們進iconfont官方圖標庫，找到自己想要使用的圖標字體，然後將其加入購物車中選擇下載至本地，iconfont有個好處那就是可以自行選擇所需的字體然後生成對應的字體樣式，這樣可以減少很多用不到的字體代碼，減少代碼（為了更好的管理我們可以建個項目來專門存放對應的字體圖標）。
下載之後我們到了一個iconfont字體壓縮包，裡面包含了字體和樣式等文件和一個dome實例，不同的文件可以根據不同的需求來使用，這裡我們可以參考dome_index.html提示來操作，裡面為我們提供了各種使用方法，如Unicode引用、Font class引用、Symbol引用。
在項目中的assets中新建一個iconfont目錄，把除了dome以外的weni文件都放入該目錄，然後在main.js中全局引入css文件，通過import './assets/iconfont/iconfont.css' 引入即可。
如果你想對圖標做適當的調整我們可以在項目中對我們的圖標進行適當的修改，如圖中所示，調整位置、大小、方向、色彩等，相當的方便快捷。
接下來我們就可以在你想要使用的任何地方引用這些iconfont字體圖標了，我比較喜歡用Font class來引入字體圖標，所以這裡我們使用 Font class方法來引入字體圖標 ，在項目中可以看到每個圖標都有對應的代碼名，我們只要在需要的地方通過一個i標籤來引用這個圖標即可，如：<aref>（前面要加iconfont哦，不然無法識別），這樣我可以將該圖標引入項目中使用了。/<aref>
除了Font class的方法，還可以使用Unicode和Symbol來引用，拿Unicode來說， 使用時需在app.vue中設置全局樣式，引入iconfont文件相關，每個圖標有對應的字符編碼，在使用的時候我們引入字符編碼即可，具體的可以參考demo_index.html，裡面寫的很詳細，還有Symbol引用方法。
閱讀更多 編程手札 的文章
