vue实战开发016:引入iconfont图标库图标

前面我在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=""><i class="iconfont icon-quill"></i></a>（前面要加iconfont哦，不然无法识别），这样我可以将该图标引入项目中使用了。

除了Font class的方法，还可以使用Unicode和Symbol来引用，拿Unicode来说， 使用时需在app.vue中设置全局样式，引入iconfont文件相关，每个图标有对应的字符编码，在使用的时候我们引入字符编码即可，具体的可以参考demo_index.html，里面写的很详细，还有Symbol引用方法。

@font-face {
  font-family: 'iconfont';
  src: url('./assets/iconfont/iconfont.eot');
  src: url('./assets/iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
      url('./assets/iconfont/iconfont.woff2') format('woff2'),
      url('./assets/iconfont/iconfont.woff') format('woff'),
      url('./assets/iconfont/iconfont.ttf') format('truetype'),
      url('./assets/iconfont/iconfont.svg#iconfont') format('svg');
}