也就是利用CSS Sprites 图片整合技术，将网站所需的icon都放到一张图里面
优点：减小图片下载体积，减少对服务器的请求，从而提高了页面的加载速度
但怎么用才简单方便，就个人经验而言，一般是这样做的：
1，建一个名为icon_map的图，大小为宽高320px，因为一般icon为16×16大小，这样横竖可以放20个，完全够用了。并在ps中用辅助线划分好，直接往里填图标即可
2，格式采用gif，支持透明，因为icon一般可用像素图完成，且适用范围可覆盖所有浏览器，包括IE6的透明
3，书写css样式：
/* icons */
.icon { display:-moz-inline-box; -moz-box-align:center; }
.icon { display:inline-block; width:16px; height:16px; background-image: url(../images/icon_map.gif); vertical-align:middle; }
.icon_1_01 { background-position: 0 0; }
.icon_1_02 { background-position: -16px 0; }
.icon_1_03 { background-position: -32px 0; }
.icon_1_04 { background-position: -48px 0; }
.icon_1_05 { background-position: -64px 0; }
.icon_1_06 { background-position: -80px 0; }
.icon_1_07 { background-position: -96px 0; }
.icon_1_08 { background-position: -112px 0; }
.icon_1_09 { background-position: -128px 0; }
.icon_1_10 { background-position: -144px 0; }
.icon_1_11 { background-position: -160px 0; }
.icon_1_12 { background-position: -176px 0; }
.icon_1_13 { background-position: -192px 0; }
.icon_1_14 { background-position: -208px 0; }
.icon_1_15 { background-position: -224px 0; }
.icon_1_16 { background-position: -240px 0; }
.icon_1_17 { background-position: -256px 0; }
.icon_1_18 { background-position: -272px 0; }
.icon_1_19 { background-position: -288px 0; }
.icon_1_20 { background-position: -304px 0; }
/* icon line 2 */
.icon_2_01 { background-position: 0 -16px; }
.icon_2_02 { background-position: -16px -16px; }
.icon_2_03 { background-position: -32px -16px; }
.icon_2_04 { background-position: -48px -16px; }
.icon_2_05 { background-position: -64px -16px; }
.icon_2_06 { background-position: -80px -16px; }
.icon_2_07 { background-position: -96px -16px; }
.icon_2_08 { background-position: -112px -16px; }
.icon_2_09 { background-position: -128px -16px; }
.icon_2_10 { background-position: -144px -16px; }
.icon_2_11 { background-position: -160px -16px; }
.icon_2_12 { background-position: -176px -16px; }
.icon_2_13 { background-position: -192px -16px; }
.icon_2_14 { background-position: -208px -16px; }
.icon_2_15 { background-position: -224px -16px; }
.icon_2_16 { background-position: -240px -16px; }
.icon_2_17 { background-position: -256px -16px; }
.icon_2_18 { background-position: -272px -16px; }
.icon_2_19 { background-position: -288px -16px; }
.icon_2_20 { background-position: -304px -16px; }
这里只写了前2排，后面依次类推，用到时再补充
a，inline-block是方便直接与文字同行，并用-moz-兼容FF2
b，用数字表示横纵的位置，这样要用icon_map中的第几个，可以方便调用：
如要用第1排第5个图标，则css调用为：
<span class=”icon icon_1_05″></span>
