做B/S系统设计时需要大量的图标，一般的做法是用PS做图标文件，文本说的是字体，用SVG绘制图标.
其好处大家都很清楚，可以随意设置大小，颜色等，目前已经被很多大网站使用，如Github等，我就不多说了。
将ICON生成字体
推荐在线工具 IcoMoon，一款非常好的在线ICON2FONT的工具，默认提供几个常用的ICON库，也可以额外选择，或者自己上传，选择要生成的ICON点Font就可以生成并下载，选择的方法可以是点选或拖动选择，不支持全选。
下载后的包里有字体文件，CSS，HTML一整套，字体文件和CSS是你要用到的，而HTML是教你如何使用，和所有图标的字体编号和样式名字方便你选择使用。
使用方法
- 用法相当简单，加入下载包里的样式文件，如：icomoon.css
-
在html元素里加入额外标签
data-icon值是下载包里html页面显示的图标下面的值，如：，这样就会生成一个图标伪元素来显示图标如：
<div class="fs1" aria-hidden="true" data-icon=""></div> -
第二方法是使用样式，同样会产生一个图标的伪元素来显示图标
如：
<span aria-hidden="true" class="icon-pushpin"></span> -
自定义使用
加载字体
@font-face { font-family:'icomoon';src:url('fonts/icomoon.eot');src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),url('fonts/icomoon.woff') format('woff'),url('fonts/icomoon.ttf') format('truetype'),url('fonts/icomoon.svg#icomoon') format('svg');font-weight:normal;font-style:normal }声明样式
.iconfont{ font-family: 'icomoon'; content: 'e000'; /*相当于& #xe000; */ }由于字体文件的后缀很特殊，一些WEB容器默认不支持，就是无法正确下载到eot，woff等文件，我的解决办法是统一在后面加上.css这样就可以正确下载并被浏览器使用，浏览器会通过 format('woff') 来识别功能。