How to add icon to a UL list tab - html

Question

I created a JSFIDDLE: http://jsfiddle.net/Qw2Q7
HTML:
<ul id="tabs">
<li class="active">By Name</li>
<li>By Specialty</li>
<li>By Location</li>
</ul>
What I am looking to do is add an image on the left of the text of each tab, something like this:
How can I accomplish adding the icon to each tab like pictured above?
UPDATE:

Answer 1

Use Css list-style-image Property.
HTML
<ul id="tabs">
<li class="active person">By Name</li>
<li class="book">By Specialty</li>
<li class="target">By Location</li>
</ul>
then CSS
ul#tabs li.person {
list-style-image: url('images/person.png');
}
ul#tabs li.book {
list-style-image: url('images/book.png');
}
ul#tabs li.target {
list-style-image: url('images/target.png');
}
UPDATE:
Instead of the above way, which might take a little more altering you could just change the background of the li and the using background-position property:
HTML
<ul id="tabs">
<li class="active person">By Name</li>
<li class="book">By Specialty</li>
<li class="target">By Location</li>
</ul>
then CSS
ul#tabs li.person {
background: #3C75C3 url('images/person.png') no-repeat;
background-position: 7px center;
}
ul#tabs li.book {
background: #3C75C3 url('images/person.png') no-repeat;
background-position: 7px center;
}
ul#tabs li.target {
background: #3C75C3 url('images/person.png') no-repeat;
background-position: 7px center;
}
EXAMPLE:
http://jsfiddle.net/Qw2Q7/57/

Answer 2

Just use an img tag like so:
<li class="active"><img src="whatever.png" />By Name</li>

Answer 3

You can define an id for each li, for example:
<li id="icon-name" class="active">By Name</li>
and then to define it a background (the icon) in your css, like:
#icon-name {
background: url('_IMAGE_PATH_') 10px center no-repeat;
padding-left: 20px;
}
I included padding so the text starts after the icon, and doesn't appear above it / cover it.
"10px" - how far you want it from the left edge
"center" - to have the icon/image in the middle of your li
Since it's a background, you need also to prevent it from repeating, by "no repeat"
_IMAGE_PATH_ should be changed to the actual path of the image.

Answer 4

you can use :before pseudo element to put the icon in every list item.
for example check the CSS below and the Demo. and now update Demo
li:before
{
content: "";
position:absolute;
content:url('http://lorempixel.com/20/20');
left:0;
height:20px;
width:20px;
}
li:before :hover
{
content: "";
position:absolute;
content:url('http://lorempixel.com/20/20');
left:0;
height:20px;
width:20px;
}
if you need separate icons then you have to add the class in each li. For example I've added class .place.
li.place:before
{
content: "";
position:absolute;
content:url('http://placehold.it/20/20');
left:0;
height:20px;
width:20px;
}

Answer 5

<ul id="tabs">
<li class="active">
<table cellspacing=1 cellpadding=1 style=''>
<tr><td><img src='source'></td><td>By Name</td></tr></table></li>
<li>By Specialty</li>
<li>By Location</li>
</ul>