图标设置，通常采用图片，png居多，但是图片多了请求数量就多了，于是诞生了雪碧图，将图片全部合并到一起来减少请求数量，这应该是一个很完美的事情了。但是Retina屏幕出现了，原来的图片需要1.5X、2X才能清晰的显示在这样的屏幕上，并且随着图片的写死，后期的交互也出现了麻烦：比如高亮就需要将原来的图片复制一次，加上高亮颜色，无疑增大了图片的体积，Font Icon可以很好的处理这个问题。

字体图标的优点

1. 字体图标是矢量，可以无损放大缩小，在Retina屏幕上有天然优势；

2. 字体图标可以减少http请求数量；

3. 可以通过CSS轻松改变样式，比如：颜色、大小、背景颜色等等；

如何使用字体图标

以 http://icomoon.io/app/#/select 举例

1. 你需要在 icomoon 选取你想要的图标，并下载，icomoon甚至提供了往下兼容的方案；

2. 引入字体，需要注意的是字体跨域的问题（IE9和火狐不允许字体跨域，需要处理）

@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;
} 

3. 申明 class

.icon-list, .icon-play{
	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;
}

.icon-list:before {
	content: "\e601";
}

.icon-play:before {
	content: "\e604";
}

4. 调用 class名称

	导航


	视频

字体图标多用用就熟悉了，相对来说还是非常实用和便捷的。