网站常用的小图标实现

在网站上我们经常能见到一些小图标，如小头像，小旗帜，一些勾勾叉叉等小图标。

一般的实现这些小图标有三种实现方案：

将所有常用的小图标罗列在一张大图片上，然后采用"css sprite"(或称"CSS贴图定位"、"雪碧图")来定位显示需要的图标

使用网页图标字体

纯css实现

一般第二第三条是使用一些前端框架后常用的方法，其中第二条展现效果最好但要定制自己的需求就不易实施了，第三条的话可实现的图标比较有限。

而现在最常用的就是第一条方法了，一方面它能很好的减少服务端请求次数，另一方面也方便实现事件驱动的图标变换效果。

由于图标一般不会有太复杂的图像轮廓和颜色，所以"雪碧图"往往以低容量的gif图保存，如果需要图标全透明背景的话，就得以png格式保存了。

最后图标输出的时候，先设置输出的dom节点的宽高来适应图标大小，然后指定background-image为这张"雪碧图"，最后通过background-position来定位输出指定的图标。