前两篇文章写了一下如何在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格式，不然不成功）
引入以后，接来下就和上面的步骤同样了。