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

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

HTML

<ul>
<li id="link1">Link1</li>
<li id="link2">Link2</li> 
<li id="link3">Link3</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;
}

Будем очень благодарны любой помощи. Заранее спасибо.

2 ответа

Ниже вы скорректировали CSS и ссылку на скрипку

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;
}


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

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

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

licensed under cc by-sa 3.0 with attribution.