图标字体制作流程

在需要大量使用图标的前端开发中，一方面使用图标字体可以像雪碧图一样减少http请求，并且图标字体相较于使用一些列的图要更小；另一方面由于字体的特性，可以轻易通过css调整大小 颜色、透明度等，使得图标的使用更加灵活，还有一些兼容性的好处等等就不多说了

依赖

iconfont

这里我们选择了阿里提供的字体图标平台  iconfont  我们可以通过它来管理我们制作好的图标，并且可以直接生成字体文件和相应的css文件

sketch

iconfont所要求的图标原文件格式是svg，制作svg图标的工具有很多，这里推荐 sketch  好东西用上就离不开

制作流程

1.新建画布，建立辅助线和网格，以便于调整图标显示的比例

2.绘制图标，完成后使用工具栏上的切片工具，切出要导出的大小

3.切出切片后右侧会显示预览图，在预览图的下方的导出设置中，文件类型选择svg，之后点击导出或者直接将预览图拖出即可

另外补充下，这里还可以通过导出设置轻松导出倍图

4.在iconfont图标管理页面中选择上传图标

5.选择全部需要导出的图标，加入暂存架，然后一并下载至本地

6.然后在本地就可以看到相应的字体和样式文件以及其他

注意事项

在制作和使用图标的过程中有些需要注意的问题可以参见iconfont提供的制作说明和应用教程

图标制作说明

图标应用教程