这里给大家分享的是icon图标和文字的写法，即雪碧图（sprite）+文字的写法，可以利用background-image 和 background-position 精确定位出背景图片所在的位置。
雪碧图样例：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>雪碧图（sprite）</title>
<style type="text/css">
li {
list-style-type: none;
}
i {
width: 30px;
height: 24px;
float: left;
background: url(images/sprite.png);
margin: 5px 10px 0 0 ;
}
.icon1 i {
background-position: 0 0;
}
.icon2 i {
background-position: 0 -24px;
}
.icon3 i {
background-position: 0 -48px;
}
.icon4 i {
background-position: 0 -72px;
}
</style>
</head>
<body>
<li class="icon1"><i></i><h3>服饰内衣</h3></li>
<li class="icon2"><i></i><h3>鞋包配饰</h3></li>
<li class="icon3"><i></i><h3>运动户外</h3></li>
<li class="icon4"><i></i><h3>珠宝首饰</h3></li>
</body>
</html>
效果如图所示：
总结：1.雪碧图的优点： 减少加载网页图片时对服务器的请求次数；提高页面的加载速度。
2.雪碧图的缺点： 内存使用；拼图维护比较麻烦；使CSS的编写变得困难。
3.使用雪碧图的规则： 静态图片，不随用户信息的变化而变化；小图片，图片容量比较小，大图不建议拼成雪碧图；加载量比较大的图片。一般情况下，雪碧图需要保存为PNG-24的文件格式。
