阿里巴巴矢量库IconFont__使用小录

使用阿里巴巴矢量库方法虽然不难，但本人记性不好，遂在次记录几笔

阿里巴巴矢量库地址：http://www.iconfont.cn/plus

阿里巴巴矢量库图标好处：

1：图标矢量化

2：自己总结：iconfont是将图标按字体的方式进行操作，所以称为字体图标，我们可以用CSS来灵活控制图标的大小、颜色、阴影等。

3：通过iconfont平台，我们可以高效快速的生产出规范的图标。

4：流量最小化。

缺点：

1:色调单一，如果图标是五颜六色的，那么iconfont不适合。最多只能用CSS3做一些简单的渐变，或者你可以蛋疼的用多个图标叠加到一起。

使用步骤：

1：进入iconfont官网：http://www.iconfont.cn/plus

2：搜索目标图标，放入"购物车"，完毕后，添加入项目中(需要登录)，没有项目创建即可

3：选择："Unicode4”，然后下载至本地

4：解压下载后的压缩包，打开，复制后缀名为：eot,svg,ttf,woff的文件到项目中，

5：打开html文件，按照其中步骤，复制1,2步骤的内容到项目的css中(.iconfont中内容的按照需求更改和添加)

6：修改路径：将css中@font-face种URL的路径改为对应格式文件路径

7:body中在想要图标的地方加入：<i class="iconfont"></i>，类名为iconfont，内容为图片的名字

8：打开网页，刷新即可看到矢量字体图标。

PS：2017-3-13：这次试用iconfnts中，发现控制台会报错，但不知道怎么解决，但是谷歌会照常显示，火狐浏览器不会正常显示。