前兩篇文章寫了一下如何在vue項目中使用vue-awesome和阿里的iconfont，這裏介紹一下如何使用iconMoon圖標css
iconMoon和前二者相比能夠生成本身的矢量圖，這點是我喜歡的。至於前兩種有沒有這個功能我暫時沒了解，今天用了一下iconMoon瞬間喜歡上！！html
首先提示一下：不要用咱們的png,jpg等格式來轉成svg格式。一個是基於像素的，一個是基於矢量線的，vue
哪怕咱們用在高級的工具轉，這些基礎的東西是沒法轉換的，app
而iconMoon生成本身的圖標必需要使用真正的svg格式圖標。svg
很少說其餘的，正式開始，iconMoon官方地址工具
1.若是想要直接使用它們自帶的官方圖標字體
選擇咱們想要的圖標以後，點擊右下角的Generate Font Fspa
這時會看到咱們已經選擇的圖標，在這裏能夠修更名稱等，而後點擊右下角的下載code
解壓文件，能夠查看demo.html，看咱們的圖標是否下載完成。在下載的文件夾中，咱們只須要fonts文件夾和style.css文件htm
接下來在vue項目中建立文件夾，這裏是我建立文件下路徑，只是提供參考
scr/common/fonts
scr/common/stylus/style.css
繼續走
打開style.css樣式，修改引入字體的路徑（不一樣路徑寫的方式不同，須要注意）
在main.js中全局引入
import './common/stylus/style.css'
若是import時出錯，多是你的vue項目沒有安裝css-loader這些，具體的問度娘吧，這裏就不解釋了。
接下來就能夠在各個組件中使用咱們已經下載好的矢量圖標了。這裏個人class的名字是test1-02，須要換成本身icon的名字
<i class="icon-test1-02"></i>
若是想要使用咱們本身畫的.svg格式的矢量圖圖標，點擊Import Icons
導入咱們本地的.svg格式的圖標（注意，矢量圖是用矢量線畫的，png,jpg等使用像素來的，不能夠直接用png轉成svg格式，不然不成功）
引入以後，接來下就和上面的步驟同樣了。