图标字体如何自制

（1）技术背景

          图标字体是将svg格式的图片用css3技术制成像字体一样直接引用的一套字体。所以，它与css3和svg技术的兼容性息息相关。随着前端技术飞速发展，图标字体类似fontawesome 和glyphicons在各大终端的兼容性也越来越好。同时，在设计发展趋势下，日益趋向简约的风格奠定了扁平图标的重要地位，这也是支持单色的图标字体得以推广的助力之一。

（2）优势

          i）图标可适配移动端，不需要更改样式只需要和字体一样适配大小icon就不会在手机上失真

          ii）便于修改颜色

（3）制作过程

          a.svg制作过程

             这里使用ai作为制作工具。虽然svg制作除了各种svg制作工具外，ps，sketch也能制作，但是ps制作矢量图标不便，而Sketch制作的svg文件在制作webfont的时候因不支持圆角和一些路径剪切，导致最终的效果和原本的图形相差太大。

             使用ai批量导出svg的话，建议安装英文版的ai，否则，可能会出现导出的都是空白文件后果。

             在ai中，我新建了多个画布制作图标，另存为svg（注意勾选Use Artboards使用画板）

            导出的svg格式的设置如下图

          b.图标字体制作过程

              在这里，我使用在线制作工具iconmoon来制作。

              单击中间黑色banner或者单击进入制作界面，单击上传制作好的svg文件，将会自动建立一个“untitled set”

              单击 右边面包屑菜单可以对导入的图标集合做增删等操作，若你不删除这套图标，下次你再登录的时候这套集合仍然是存在的

              选择每一个需要制作成icon的图标的，单击右下角的“Generate Font”

              这时，可以看见右下角出现了“Download”字眼

              这个时候不要马上就直接下载了！我们单击“Download”右边的设置齿轮小图标，在这里，我们可以修改字体的名字、图标命名前缀和浏览器兼容要求等等。

（4）引用方法

         下载的文件解压后如下图所示

         打开“demo.html”，我们可以发现这个页面和我们下载前看到的页面是一样的，可以查看图标对应的名字

         将“fonts”和style.css文件拷贝到你的项目目录下（如果考虑兼容性可将IE7文件一起拷贝），引用这些文件。

         还可以像字体一样，为图标指定不同的颜色，效果如下图所示。