网页上的字形图标是图片吗？还是哪种特殊格式的代码？
类似bootstrap等，都有自己的字形图标库，有的还能定制，这些是图片格式吗？还是特殊代码
很多都是svg格式的，这些类型的图的使用能使得没必要使用图片，从而减小浏览器的负担，优化性能，除了Bootstrap以外比较受宠的还有阿里巴巴的矢量图标库，里面的矢量图标类型多而且都免费，还能自己定制，你可以看看http://www.iconfont.cn/
这种是有不同的类的 ，直接 在类中写不同的代码 就是不同的图标
由于我已经是 Material Design 的忠实粉丝，所以制作方法也是基于此来考虑，首先使用的软件是 AI ，有一个标准的参考线
依据参考线制作图标，保证整体视觉的统一性，这个在 IconFont 来说是尤其重要的
如上图所示，在24*24的画布下，图标的常规尺寸为20*20，周边为基础间距，当然一些特殊性的图标也可以溢出，这个就看实际的视觉统一性来考虑了。
以上是Material Design 的示例规范，有兴趣的童鞋可以 看这里 － 直接拉下去看 系统图标 ，前面的 产品图标 请忽略
"
图标的统一性和规范制作方法是烧脑的设计，统一的角度，统一的线条，统一的造型等等，还要让团队的各位设计师都能共同参与设计，都需要有强大的图形塑造系统性思维，共勉～
－By Hengry "
设计完后，就输出成SVG，到此第一步完成，请看下图：
No.2
在这里隆重再次介绍 Icomoon 的出场， https://icomoon.io/ ，右上角可以注册，详细的操作按钮也在旁边，请看下图
进去之后，点击 左上角的汉堡包新建一个 New projects，然后再点击很明显的 Import Icons 按钮，把刚刚导出的SVG文件丢进去，或者你直接从文件夹拖过去也行，然后很神奇地你就会看到图标已经在里面了
大家先选 Edit ，再点击图标就会出现上面这张图，可以看到图标的属性，其中Tags 可以自己定义，方便搜索，Nams 就不能那么随便了，因为WEB主要引用的就是这个代号，补充好这个后，最后的输出字体，点击右下角 的 Generate Font
这里也能再次修正Names 属性，然后还有下面的 Code (e900)是Icomoon 自己生成的，APP主要用 Code ，比较严谨一点一般都有自己的命名规则，在此就不细说了，最后，点击 右下角的 Download 就能下载自己专属的IconFont 了～
另外按钮旁边有个设置按钮，有一些关于图标命名的设定
Demo 是 IconFont的预览，然后字体都在 fonts 文件夹，自行安装字体即可，这个不用我说了吧～
到此，怎么制作自己的 IconFont 就结束了，有疑问的童鞋可以留言。
IconFont 怎么使用？
在这里就不从技术角度去说使用的问题了，这个交给开发GG去考虑即可，对于设计师而言，平时工作中又能起到怎样的便利作用呢？
主要针对 2 个常用软件来说明，分别是 AI 和 PS
简单来说，可以被认为是一种图片（不同格式而已）