ICON小图标

ICON

CSS Sprite

background-image,background-position（注意坐标，索引值重0开始）

特点：

相对单个小图标，它节省文件和服务器请求的次数

一般情况下，需要保存为PNG-24的文件格式

可以设计出丰富多彩的颜色图标

难点：

注意每个小图标的大小

小图标之间的距离

font+html

灵活性：轻松地改变图标的颜色和其他的CSS效果

扩展性：改变图标的大小

矢量性：缩放图标不会影响清晰度

兼容性：字体图标支持所有现在浏览器

本地使用：在不同的设计和编辑使用

自己编辑图标：（http://flowerboys.cn/font）

EOT:微软开发，IE专用

WOFF：被W3C推荐

TTF:Mac OS，WIN最常见一种字体

SVG：W3C开放标准的图形格式

@font-face{
font-family: "imooc-icon";
src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */
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") format("svg");
font-weight: normal;
font-style: normal;
}

font+css

.icon-spinner:before {
content: "\e600";
}  实心
.icon-heart:after {
content: "\e602";
}  空心

对比：

CSS Sprite	font+html	font+css
原理	背景图片定位	@font-face
兼容性	完美	完美
颜色	丰富	单一
缩放	失真	高清
维护	困难	简单