Главное при составлении спрайта, это сделать кратные расстояния между картинками, чтобы потом было легче высчитывать позицию фона.
Далее можно либо назначить каждому месту вызова спрайта отдельный класс и в нем указывать позицию и название фона, либо прописывать один класс, но для каждого вызова задавать отдельный 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>
== Пример ==