Iconfont 是指用字体文件取代图片文件，来展示图标、特殊字体等元素的一种方法。使用图标字体能我们带来了一定的方便，比如在移动设备、Retina屏幕效果展示、兼容IE6/7浏览器以及能任意将图标放大缩小等，这些都是很不错的。
Iconfont 优点：
（1）文件加载体积小；
（2）可以直接通过css的font-size，color修改它的大小和颜色，对于需要缩放多个尺寸的图标，是个很好的解决方案；
（3）支持一些css3对文字的效果，例如：阴影、旋转、透明度；
（4）兼容低版本浏览器。
国内目前阿里旗下的ICONFONT比较好用和全面：阿里巴巴矢量图标库
使用方法参考：阿里巴巴矢量图标库使用方法
利用icomoon来实现网页字体
流行的在线字体定制网站有Fontello和icomoon，这两个在线工具都很不错的，内置的图标也非常的多，当然在我今天分享的文章中的图标字体更多更实用更好哦^.^ 接下来我主要讲讲icoMoon的字体定制方法：
打开icoMoon APP字体定制页面，然后你会看到几百个常用图标，这里不建议全选，选几个你需要的就可以了，然后点击底部的“Font”按钮 –> 点击“Download”即可下载字体。
下载完字体后，把Demo文件里面的style.css文件内容复制至你的CSS文件上。
@font-face {
font-family: 'shejidaren';
src:url('fonts/shejidaren.eot');
src:url('fonts/shejidaren.eot?#iefix') format('embedded-opentype'),
url('fonts/shejidaren.woff') format('woff'),
url('fonts/shejidaren.ttf') format('truetype'),
url('fonts/shejidaren.svg#shejidaren') format('svg');
font-weight: normal;
font-style: normal;
}
...
//详情请参考文档
HTML代码，有两个调用方法，而且两个都很简单：
1.使用data-icon=”?”,这个是HTML5的属性哦~~
<a href="#"><span data-icon="?" aria-hidden="true"></span>帮助</a>
2.使用Class类
<span aria-hidden="true" class="icon-help"></span>