矢量字体图标文件生成（iconfont或webfont生成）

教程简单一句话：用阿里巴巴矢量库下载svg，然后用icomoon进行生成字体图标和相应style.css。

下边是详细步骤

前言：font awesome

当我们用font awesome，是不是被其方便的图标操作性所吸引。然而总是，如果止步于此，那就太瓜了。

首先，发扬雷锋精神，贴出font awesome的相关网站：

font awesome英文官网：http://fontawesome.io/

最新版为4.7.0，包含675个图标；而3.2.1版本包含361个图标，与4.7.0不兼容。

font awesome中文官网：http://fontawesome.dashgame.com/

同英文官网内容。

准备，放大招了：阿里巴巴矢量库

官网：http://www.iconfont.cn/

包含100多万各种图标，支持图标搜索，大小定制，颜色定制，甚至格式下载定制。厉不厉害，惊不惊喜，惊不惊讶！

开始，板凳盘起：字体图标库定制

第一步：在阿里巴巴矢量库收藏需要的图标；

1、搜索需要的图标，鼠标指上去，点五角星。比如我要搜索一个妖娆的美女，如下图：

2、查看收藏

3、下载svg文件，注意，下载的要是svg文件哟

4、当你下载几个之后，打开网站https://icomoon.io/app/#/select，点击如下新建一个库。

5、如图导入你刚才下载的svg，可以一次性选择所有。

6、选择所有图标开始生产，那个绿圈圈当然就是可以不选所有。你也可以一个个点击选哈。

7、点击页面底部的这个

8、配置及下载：1：点击眼睛配置大小，2、点击文字配置类名，3、点击download就可以下载了。

9、使用及调用：下载的文件是zip压缩包，你只需解压后，靠背style.css和fonts文件夹到你的项目中，建议不要更改这俩文件的相对位置，然后调用style.css就行。使用时，比如上边的guanli图标，就可以用就可以了。

特别备注：

1、在第8中，你可以点selection（底下中间那个），进行继续编辑。

2、在如下图的菜单中，点击第一个，也就是那个箭头，点下边每一个图标，就是选中的意思。点击垃圾桶，点哪个图标就会删除哪个图标；点十字，可以拖动图标排序，点铅笔，点图标就是编辑。

4、在下图中要注意imort to set，是可以增加增加svg的，而上图的那个紫色的大图标，是不加入这个你正在编辑的库里的，自己去感受吧。

5、好了，字体图标的大门就打开了，svg你可以到处找，甚至用AI自己做。相信马爸爸的矢量库够大家用了。所以也就懒得教那了，有兴趣的可以移步：AI制作SVG字体图标教程

http://www.uisdc.com/make-the-font-icon