Adding menu icons?

Question

How can we add icons on the navigation? Thanks :)

Answer 1

Every menu item has assigned own class so you can use css background image for each menu.

Example:

qa-nav-main-activity{background:url()no-repeat left center;

 

Comments

Not working for me...

---

post your code somewhere online and let's see what you have done yet..
use this http://pastebin.com/ or http://www.sitepoint.com/top-5-places-to-share-code-quickly/

---

http://pastebin.com/hHV66Qsd

---

First change your Navigation Icons comment. It should not */ but /*
Image not visible because of leading slash / in url(/images/....) change it to url(images/....) by removing leading slash. Working code you can find here http://pastebin.com/k3EKqY68

---

Little silly mistakes -_- Homepage icon still does not work though.. I guess the class name is different.

It's not .qa-nav-main-, it's not .qa-nav-main-activity either ?

---

You should use code inspector to check.. Firebug or something like that.

---

They don't help.

:hover is not working either...

http://limoniyidir.com

---

You have applied background directly on your li with the class where your hover event is on anchor tag with this class .qa-nav-main-link:hover..

So try to add icon class + .qa-nav-main-link:hover. example

.qa-nav-main-tag .qa-nav-main-link{
your background and other css...
}
.qa-nav-main-tag .qa-nav-main-link:hover{
your hover css
}

---

Thanks dude, your a star! I found the main class too... For those who might face the same issues;

.qa-nav-main .qa-nav-main-link    {background: url(...);}
.qa-nav-main .qa-nav-main-link:hover     {background: url(...);}
.qa-nav-main-questions .qa-nav-main-link {background: url(...);}

the main + :hover has to be infront of the rest or you will get duplicates for questions and tags links.

---

Glad to know that works for you.. if this answer works than select as a working answer for other user to refer.