最近在項目中需要使用第三方圖標庫，我選擇了阿里的iconfont。記錄下學習過程。在網上查閱資料的時候，發現很多教程寫的比較模糊，一些博主只是提供一種可實現的方式，但是並沒有完全區分iconfont的幾種引入方式及對應文件的作用，我一開始是有點混淆的，所以自己做了實踐總結。
目錄
1、在Iconfont網頁上建立自己的項目
打開官網：https://www.iconfont.cn/並登錄。
在首頁選擇【圖標管理】-【我的項目】，
進入項目管理頁面。
點擊紫色按鈕，新建項目，
填寫項目信息，即可完成新建一個項目。【FontClass/Symbol 前綴】和【Font Family】參數是自定義的，以後會與我們生成的代碼相關聯。
2、選擇圖標加入購物車
新建好項目後，找到自己想要的圖標，加入購物車。
點擊頁面右上角的購物車圖標，打開自己的購物車，選擇添加至項目，我們就可以在自己的項目下看到添加的圖標了。
在我們的項目下，我們可以對圖標進行編輯。
3、Vue工程中引入iconfont
官方文檔：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code
有unicode引用、font-class引用、symbol引用三種引入方式，這三種方式又分有兩種情況：下載到本地引入，在線鏈接引入。在Iconfont網頁我們自己的項目下可以看到這些方式選擇。
3.1本地引入和鏈接引入區別
在講三種引入方式之前先區分下本地引入和鏈接引入方式，避免混淆。
本地引入就是將文件下載到本地，進行引用。如上圖所示，點擊【下載至本地】，就可以打包下載當前項目的文件資源，解壓後的一些文件是沒有用的，將下圖選中的文件放到自己的工程中引用即可。（其實iconfont.css和iconfont.js分別對應font-class引用和symbol引用，所以不需要都放在項目中，根據自己的需要選擇文件即可，我這裏選中表示這幾個文件是我們可能需要用到的。）。
demo_index.html文件打開後是項目內容信息及教程。
鏈接引入是使用平臺提供的網絡鏈接資源，不需要下載。在項目頁面點擊【查看在線鏈接】可以看到每種引入方式對應的代碼。
3.2 unicode引用
根據文檔，unicode的方式我們只關注三個元素：font-face，iconfont樣式以及unicode字體編碼。
@font-face是CSS3中的一個模塊，他主要是把自己定義的Web字體嵌入到你的網頁中。屬性詳解參考：http://www.cnblogs.com/moqiutao/archive/2015/12/23/5070463.html。
iconfont本質是一種特殊字體，所以可以通過font的相關屬性去控制樣式。第二步和第三步中的font-family就是創建項目時填寫的Font Family的值。至於classname可以自己定，不一定要用.iconfont。樣式中font-size屬性控制字體圖標大小，我們還可以通過color屬性修改顏色。
“3”的形式就是字體編碼，在項目管理頁面可以通過【複製代碼】得到或者編輯查看。
3.2.1 本地引入
unicode方式代碼量少，並不需要下載本地文件。
3.2.2 鏈接引入
Unicode模式下的在線鏈接指的是font-face代碼。
在vue中，將項目生成的font-face代碼和自定義的iconfont樣式寫在App.vue的style中，就可以在項目中引用圖標了。此時樣式是全局作用的，如果想要實現圖標不同的樣式，可以增加一層自定義樣式。
<i class="iconfont myIconStyle"></i>
在”myIconStyle”樣式中修改color等屬性可以覆蓋全局的樣式，實現單個的樣式修改。
這裏注意理解下，官方文檔說的“不支持多色”，是指我們iconfont網頁項目中，就算有多色圖標，引用的時候會自動去色，統一變成默認的顏色，不管你給圖標一編輯了紅色圖標二編輯了黃色，在項目中用unicode方式引用的時候都會變成默認顏色，但是我們仍然可以通過修改css樣式實現圖標顏色自定義，只是這個顏色編輯放在代碼層面來了。
3.3 font-class引用
如官方文檔所說，font-class是爲了讓程序更加直觀可讀，直接用unicode會造成閱讀困難。font-class模式關鍵在於生成的css文件。
3.3.1 本地引入
上面已經介紹過下載本地文件的方式，按照下圖選擇文件放入自己的項目中，vue中建議在assets文件夾下新建一個iconfont文件夾，放相關文件。
然後在main.js中引入iconfont.css文件，就可以正常使用了。
import './assets/iconfont/iconfont.css'
不支持多色的意思，font-class引用和unicode引用是一樣道理，顏色和大小都可以自定義修改。
3.3.2 鏈接引入
在index.html頭部中，引入css文件即可
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1160473_t1iruikumm.css">
3.4 symbol引用
Symbol方式我們關注的是js文件。
3.4.1 本地引入
將下載好的iconfont.js文件放入自己的工程目錄，在main.js中引入，在App.vue中寫好通用css代碼，即可使用。
import './assets/iconfont/iconfont.js'
這裏注意一點，下載下來的js文件是壓縮過的，如果項目使用了eslint語法校驗會瘋狂報錯，可以在js文件開頭加入
/* eslint-disable */來指定該文件不應用eslint校驗。
3.4.2 鏈接引入
在index.html頭部中，引入js文件即可
<script src="//at.alicdn.com/t/font_1160473_t1iruikumm.js"></script>
3.5總結
symbol引用最受官方推薦，也是最優的方式，但是瀏覽器兼容不好，目前來看，前端需要兼容一些低版本的瀏覽器，所以如果考慮到用戶使用，不建議採用symbol引用。
unicode引用瀏覽器兼容最好，但是可讀性差，font-class引用雖然兼容性比unicode引用差一點，但是提高可讀性，綜合來看，目前項目中還是採用font-class引用比較好。
因爲引用網絡資源的不穩定，所以建議採用本地引入的方式。
如果在圖標庫中新增加了圖標，則需要更新在線鏈接並把該鏈接重新引入到實際項目中，或者重新下載代碼到本地，然後在實際項目中引入最新的iconfont文件。
4、參考資料
http://www.cnblogs.com/fashandian/p/6880892.html