CSS спрайты — это представление большого количества мелких картинок, путем создания одной большой картинки, что существенно экономит время загрузки и ресурсы хостинга (запрос идет всего-лишь на одну картинку, вместо всех).
Главное при составлении спрайта, это сделать кратные расстояния между картинками, чтобы потом было легче высчитывать позицию фона.
Далее можно либо назначить каждому месту вызова спрайта отдельный класс и в нем указывать позицию и название фона, либо прописывать один класс, но для каждого вызова задавать отдельный background-position.

<style type="text/css">
	ul li i{
		display:block;
		width:49px;
		height:45px;
		background: url('/sprite.png');
	}
</style>
 
<ul>
  <li><a href="#"><i style="background-position:0px 0px"></i> текст</a></li>
  <li><a href="#"><i style="background-position:-48px 0px"></i> текст</a></li>
  <li><a href="#"><i style="background-position:-95px 0px"></i> текст</a></li>
</ul>

== Пример ==