最正式的方法就是给一个透明图片加样式：
<img src="blank.gif" width="16" height="16" class="sprite" />
但是这样做有一些缺点：
1. 会多一个图片的请求
2. 众所周知的，内联行里的图片和中文字的底端无法对齐。这个问题的解决办法也有，就是用“vertical-align: -2px;” 强行把图片拉下来一截。
第二种方法：
a {
display: block;
text-indent: -3000px;
overflow: hidden;
width: 20px;
height: 20px;
background: url(...);
}
这个方法很不错，唯一的缺点就是它只能用于样式被设为块级的元素。
第三种方法是我自己想出来的，比较山寨，但是挺实用：
<span class="sprite"> </span>
.sprite {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
letter-spacing: -14px;
padding-left: 50px;
background: url(...);
}
其中padding-left用来调节宽度。
这个方法的好处在于：
1. 没有多余的空白图片
2. 支持inline样式
3. 良好的垂直对齐
但这个山寨方法有很多局限性：
1. 高度的调节很麻烦。不同的浏览器对字体和行高的解析不一致。
2. 可能在不同操作系统中宽度和高度会不一致。（我还没全面测试）
不管怎么样，这至少是一个在某些固定环境中可以尝试的方法。