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:

enter image description here

How can I accomplish adding the icon to each tab like pictured above?

UPDATE:

enter image description here

The mouse over color doesn't change with that version. I tried it already :/ — SearchForKnowledge, Mar 27 '14 at 20:22
@SearchForKnowledge The mouse-over color change seems to work just fine for me on Chrome/Win7 — Dryden Long, Mar 27 '14 at 20:24
@SearchForKnowledge It doesn't change in the fiddle you provided either. Is this something you want to add? If so, you'll need to post another question about that specifically. — Dryden Long, Mar 27 '14 at 20:26
@DrydenLong My apology as I have mistakenly thought it did. works fine :) UPVOTED your response. — SearchForKnowledge, Mar 27 '14 at 20:32

JCBiggar · Accepted Answer · 2014-03-27T21:01:40.013

6

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/

edited Mar 27 '14 at 21:01

answered Mar 27 '14 at 20:26

JCBiggar

2,477
3
20
33

Looks very clean and simple. I will try it. I UPVOTED your answer for the time being. – SearchForKnowledge Mar 27 '14 at 20:36
1

Thanks! Also, if the images dont show up, you might want to use, `float: left/right` in your css instead of `display:inline`. If you want I can make the code in jsfiddle – JCBiggar Mar 27 '14 at 20:45
If you can please... The image and the text I would like to center vertically and the a little padding between the text and the image. – SearchForKnowledge Mar 27 '14 at 20:45
I just made an update to my answer. It might be an easier solution with your code. – JCBiggar Mar 27 '14 at 21:02
1

here is an example at JSfiddle: http://jsfiddle.net/Qw2Q7/57/ .. Im using the same images for all three.. but the code is all there. – JCBiggar Mar 27 '14 at 21:05
1

Think your is working. I will add it to my code and test... Thanks. – SearchForKnowledge Mar 27 '14 at 21:06
WOW... the placement of the lines in CSS makes a difference!!!. I think it's working. I will verify. Thanks :) – SearchForKnowledge Mar 27 '14 at 21:09
One more thing... I need to put spaces between icon and text. – SearchForKnowledge Mar 27 '14 at 21:11
1

Actually nevermind, I had to make the padding more and it's working fine now. Thanks :) ACCEPTED your answer. – SearchForKnowledge Mar 27 '14 at 21:12

score 2 · Answer 2 · answered Mar 27 '14 at 20:18

2

Just use an img tag like so:

<li class="active"><img src="whatever.png" />By Name</li>

answered Mar 27 '14 at 20:18

Dryden Long

10,072
2
35
47

The image is not aligned properly vertically if I use it like that. – SearchForKnowledge Mar 27 '14 at 20:21
1

add css to it. I've updated ur fiddle and posted as a comment. – ajc Mar 27 '14 at 20:21
@SearchForKnowledge That's another question then... See here for how to align the images: http://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css – Dryden Long Mar 27 '14 at 20:22
@ajc This solution works. But I think I might go with Kheema's as his uses the CSS method. Thanks. – SearchForKnowledge Mar 27 '14 at 20:28

Kheema Pandey · Answer 3 · 2014-03-27T20:37:18.623

2

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

edited Mar 27 '14 at 20:37

answered Mar 27 '14 at 20:21

Kheema Pandey

9,977
4
25
26

@SearchForKnowledge does this solution helpful for you? – Kheema Pandey Mar 27 '14 at 20:24
1

the image is calling from the server .this might be reason image appear slightly later, but if you use your local images or icon it will run perfect. – Kheema Pandey Mar 27 '14 at 20:27
What if I wanted three separate icon for three different tab? – SearchForKnowledge Mar 27 '14 at 20:30
I am updating my code to match yours and will update you. Thanks :) – SearchForKnowledge Mar 27 '14 at 20:41
How can I vertically align the icon and the text center? I updated my question with the image of how it's showing up. – SearchForKnowledge Mar 27 '14 at 20:48
you can use `vertical-align:top` – Kheema Pandey Mar 27 '14 at 20:49
for the image or inside the LI:before? – SearchForKnowledge Mar 27 '14 at 20:50
what is your icon size? – Kheema Pandey Mar 27 '14 at 20:52
They are 32X32 right now, but I might make them smaller – SearchForKnowledge Mar 27 '14 at 20:52
after seeing the screen the text appear a bit lower. so you have to play with margin-top or padding-top values in `li` only. – Kheema Pandey Mar 27 '14 at 20:55
From your code the boxes became bigger maybe thats why. Is there any way to keep the box same size as my original fiddle and just insert the image? Sorry, but I am trying to make it close to being perfect :) – SearchForKnowledge Mar 27 '14 at 20:56
since you are going to use icons and ideal size is something around 20px/20px. lets use this values and see if its fit. – Kheema Pandey Mar 27 '14 at 21:01
Used smaller the image but for some reason the text is still not aligned center vertically :/ – SearchForKnowledge Mar 27 '14 at 21:05
okay if you need to move icon up or down work on `:before` element using `top` and `left`. or you need to play with text then make changes on `li` by giving ` vertical-align' property. Hope it will help you. – Kheema Pandey Mar 27 '14 at 21:13
@KheemaPandey... Thank you for the help. I think I will be using JCBiggar's solution as it's working perfectly. Yours worked as well but it created the buttons bigger. Thank you for the help. I UPVOTED your answer btw. – SearchForKnowledge Mar 27 '14 at 21:13

score 2 · Answer 4 · answered Mar 27 '14 at 20:29

2

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.

answered Mar 27 '14 at 20:29

dnns

326
4
10

This sounds like a good solution. I will test it out. Thanks @dnns – SearchForKnowledge Mar 27 '14 at 20:33
Something else -- in order to keep your colour, you have already defined there, just include it (#3C75C3) before "no-repeat", for example. – dnns Mar 27 '14 at 20:35
Actually it's my mistake because mine wasn't changing color either. Sorry. I upvoted your answer :) – SearchForKnowledge Mar 27 '14 at 20:54

score -1 · Answer 5 · answered Mar 27 '14 at 20:22

-1

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

answered Mar 27 '14 at 20:22

sunny singh

52
5

really table required here? – Kheema Pandey Mar 27 '14 at 20:23
Am trying to avoid using table... Thanks for the response – SearchForKnowledge Mar 27 '14 at 20:24
`tables` should only be used for "tabular data" in current spec. – Kelderic Mar 27 '14 at 20:26

How to add icon to a UL list tab

5 Answers5