How to add icon to a UL list tab

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>