Как разместить значок/изображение слева от ссылки с помощью спрайтов CSS?

Question

Учитывая разметку ниже, как бы поместить значок слева, используя css спрайт? Я работал с спрайтами раньше, но не так, как в примере ниже.

HTML

<ul class="menu"> 
<li id="link1"><a href="">Link1</a></li> 
<li id="link2"><a href="">Link2</a></li> 
<li id="link3"><a href="">Link3</a></li>  
</ul> 

CSS

ul.menu { 
width:210px; 
font-family:FranklinGothic-Book, Georgia, "Times New Roman", Times, serif; 
} 

ul.menu li { 
color:#000; 
font-size:24px; 
list-style:none; 
border-top:1px solid #dcdcdc; 
margin:14px 0; 
} 

ul.menu li:hover { 
color:#000; 
background-color:#dcdcdc; 
list-style:none; 
border-top:1px solid #dcdcdc; 
margin:14px 0; 
} 

ul.menu li a { 
color:#000; 
list-style:none; 
border-top:1px solid #dcdcdc; 
text-decoration:none; 
margin:14px 0; 
} 

ul.menu li#link1 { 
background-position:0 0; 
} 

ul.menu li#link1 span { 
font-size:18px; 
} 

ul.menu li#link2 { 
background-position:0 -2px; 
} 

ul.menu li#link3 { 
background-position:0 -5px; 
} 

Любая помощь будет принята с благодарностью. Заранее спасибо.

Answer 1

Ниже исправленный CSS и fiddle link

ul.menu li { 
color:#000; 
font-size:24px; 
list-style:none; 
border-top:1px solid #dcdcdc; 
margin:14px 0; 
padding-left:20px; 
background:url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6) no-repeat 0 -633px; 
} 

ul.menu li#link1 { 
background-position:0 -633px; 
} 

ul.menu li#link2 { 
background-position:0 -605px; 
} 

ul.menu li#link3 { 
background-position:0 -655px; 
} 

Answer 2

У вас есть много вариантов, но это самый простой.

1) Используйте свойство стиля списка (стиль списка для сокращения).

ul.menu li { 
    list-style: url('icons.png') outside; 
}