網站經常使用的小圖標實現

在網站上咱們常常能見到一些小圖標，如小頭像，小旗幟，一些勾勾叉叉等小圖標。
通常的實現這些小圖標有三種實現方案：

1. 將全部經常使用的小圖標羅列在一張大圖片上，而後採用"css sprite"(或稱"CSS貼圖定位"、"雪碧圖")來定位顯示須要的圖標
2. 使用網頁圖標字體
3. 純css實現

通常第二第三條是使用一些前端框架後經常使用的方法，其中第二條展示效果最好但要定製本身的需求就不易實施了，第三條的話可實現的圖標比較有限。

而如今最經常使用的就是第一條方法了，一方面它能很好的減小服務端請求次數，另外一方面也方便實現事件驅動的圖標變換效果。
因爲圖標通常不會有太複雜的圖像輪廓和顏色，因此"雪碧圖"每每以低容量的gif圖保存，若是須要圖標全透明背景的話，就得以png格式保存了。

最後圖標輸出的時候，先設置輸出的dom節點的寬高來適應圖標大小，而後指定background-image爲這張"雪碧圖"，最後經過background-position來定位輸出指定的圖標。