日期：2012-8-27 来源：GBin1.com
在线演示 本地下载
主要特性
使用icon font来生成图标相对于基于图片的图标来说，有如下的好处：
自由的变化大小
自由的修改颜色
添加阴影效果
IE6也可以支持
支持图片图标的其它属性，例如，透明度和旋转等等
可以添加text-stroke和background-clip:text等属性，只要浏览器支持
如何使用？
文字修饰：
Stats
[data-icon]:before {
font-family: icons; /* BYO icon font, mapped smartly */
content: attr(data-icon);
speak: none; /* Not to be trusted, but hey. */
}
单独图标：
RSS
/* Same CSS as above, plus */
.icon-alone {
display: inline-block; /* Chrome 19 was weird with clickability without this */
}
.screen-reader-text { /* Reusable, toolbox kind of class */
position: absolute;
top: -9999px;
left: -9999px;
}
创建你自己的icon font - IcoMoon
如果大家需要创建自己的iconfont，推荐使用iconmoon，使用它你可以通过上传SVG或者字体来生成你需要的icon字体，本文在线演示使用iconmoon生成。
步骤1：选择他们提供的或者上传自己的
......
来源：如何在HTML中使用图标字体 - icon font?
