网页技术的升级中,字体图标随着HTML5的应用,使用范围也越来越多。 开源免费的最佳案例应该是Font Awesome,最新的4.3版本新增了很多图标,基本能满足日常网页或者应用的使用。

在电商行业内也有阿里巴巴系的 http://www.iconfont.cn 比较出名,并且提供在线工具帮你快速生成字体图标。

我们在产品研发过程中,也会面临类似的问题,并且我们是极希望能够从自己手中交出去的项目使用的都是最新最稳定最好的技术,那么我们团队整理了图标字体的快速扫盲教程,帮助大家有一个基本的认知。

1. 所有图标,都需要先制作。

在AI(Illustrator)中设计好想要的图标,(图标是填色模式,描边情况下,之后的转换会有损)储存为SVG格式(默认设置即可)

1-01

2. 制作好SVG文件之后,就是使用工具来生成你所需要的图标字体了。由于设计师们很少工作在命令行界面,所以我们推荐的也都是一些可视化操作的工具。例如:icomoon.io 就是个不错的平台

2-01

当然了,还有以下四个平台:

free font converter,The FontSquir­rel Con­verter,TransType ,Font 2 Web

4-01 5-01 6-01 7-01

我们将会把这一项改进服务加入到所有的工作中。