1.下載icon圖標，推薦
icomoon網站，里面有大量的矢量圖標，也可以自定義，當然你也可以去
阿里巴巴矢量圖標庫下載你所需要的小圖標。點擊進入icomoon網站點擊右上角“IcoMoon App”，找到自己需要的圖標后選擇然后點擊右下角“Generate Font”,接着可以在左上角第二個按鈕“Preferences”進行自定義你要下載的圖標信息，一般我都是進去改一下“Font Name”,然后返回點擊右下角“Download”,這樣你就下載了圖標。
2.解壓下載的圖標壓縮包，得到這樣的文件：
3.在vue項目里src文件夾中新建common文件夾，將這里的fonts復制到common中，再在common文件夾中新建一個stylus文件夾，將這里的style.css復制到stylus中，這個css文件放的是圖標的相關樣式代碼，我放進去后改成icon.styl便於識別(PS:我是用stylus預處理器，所以新建stylus，並且后綴名為styl，不同預處理器可以不同，這個見仁見智，只是盡量遵循代碼規范而已)，放入后的文件夾結構如下：
4.那么現在就是重點了，剛解壓的文件中style.css中@font-face的url路徑是需要修改成項目中的路徑的，修改如下：
5.然后要在App.vue里引入這個文件，不然是不生效的：
6.然后在template上寫對應的class名，加上樣式即可：
得到的頁面如下所示：
如需轉載請注明出處：http://www.cnblogs.com/zishang91/p/7590948.html，以便有錯誤可以及時修改，若有錯漏不足之處，請見諒並且指點，謝謝！！！