网站经常使用的小图标实现

在网站上咱们常常能见到一些小图标，如小头像，小旗帜，一些勾勾叉叉等小图标。
通常的实现这些小图标有三种实现方案：

1. 将全部经常使用的小图标罗列在一张大图片上，而后采用"css sprite"(或称"CSS贴图定位"、"雪碧图")来定位显示须要的图标
2. 使用网页图标字体
3. 纯css实现

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

而如今最经常使用的就是第一条方法了，一方面它能很好的减小服务端请求次数，另外一方面也方便实现事件驱动的图标变换效果。
因为图标通常不会有太复杂的图像轮廓和颜色，因此"雪碧图"每每以低容量的gif图保存，若是须要图标全透明背景的话，就得以png格式保存了。

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