刚接触font icon,所了解得不深，仅仅作学习笔记。

个人理解的font icon是以字体文件取代图片文件，来代替小图标。

好处是能基本兼容所有的主流浏览器，不再为IE6不兼容半透明图片而烦恼。并且因为是字体，所以在移动开发当中拉伸和缩放中都不会影响icon的质量。

凡事有弊有利，font icon因为是文字，所以暂时只能是单一地填充颜色，这种情况随着这种技术的应用越来越广泛或许会有改观。

工具：

把矢量图用AI或者psd导出svg或者eps，利用FontLab生成各种格式的字体文件。在此推荐线上字体制作平台：http://icomoon.io/

前端应用：

必须先用@font-face声明字体：

@font-face{font-family:'icomoon';src:url('fonts/icomoon.eot'); /*IE9*/src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),/*IE6-IE8*/url('fonts/icomoon.woff') format('woff'),/*chrome、firefox*/url('fonts/icomoon.ttf') format('truetype'),/*chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('fonts/icomoon.svg#svgFontName') format('svg'); /*iOS 4.1-*/font-weight:normal;font-style:normal;
}

很多浏览器不会跟进文件的后缀名去自动识别字体格式，所以，format帮助浏览器识别字体格式，不能识别的时候加上#号后面是文件的备用名称。

定义使用fonticon的样式:

[class^="icon-"], [class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;/*设置字体的抗锯齿或者说光滑度的属性*/-moz-osx-font-smoothing:grayscale;
}

利用CSS3伪元素插入对应的字符编码：

1 .icon-icons:before{
2
3 　　content:"\e602";
4 }

最后应用到页面中：

1 <div><spanclass="icon-icons"></span></div>

但有时候需要在html直接插入，所以就需要把生成的字符编码\转换成&#x。例如：\e602 转换成  即可使用：

<div><span class="icon-">&#xe602;</span></div>

可是，IE9以下版本并不兼容CSS3伪元素，所以并不能通过base64置于样式当中。所以，在此推介阿里的字体制作平台：http://www.iconfont.cn/，实现过程，在此略过。

个人认为，如果不是移动开发，或者需要兼容低版本浏览器的开发过程中不推荐使用font icon这种技术，因为即使能在浏览器中能显示图像，但并不能展示font icon最强大的一面。