Add icons to the navigation bar!

[Asama]

Hello guys,
I wanna add some icons (let's call them status icons) to the main navigation bar
of my forums like for the BLOG tab I would like to add a pencil icon and for FORUMS tab I would like to add a chat icon and so on (I wanna use these icons from ionicons.com).
Can anybody help me with that please?
Here's my website: https://www.xtreme-developing.com/forum
Thanks in advance!

[Spangle]

That link returns a server error

[Asama]

sorry link updated

[Asama]

Any Update?

[Replicant]

Those icons are fonts. You will need to install the fontpack first to use them or extract the images from the fontpack and manipulate the size with CSS.

You can then use the CSS to add the icon in font notation \f212 or as an image url("path to image") before the text that is currently in the tab using content on the unique css selector for each tab.

http://www.w3.org/wiki/CSS/Properties/content

[Asama]

Okay I already have installed these icon fonts but i don't know how to add them to every tab like for the NEWS tab which is a link to my wordpress and the home of my website and for PHONES tab because my website is about Android devices....
Do i have to add in css_additional.css simply:

.news { 
content: /f221;
}
.phones { 
content: /f004;
}

??
Can i add these icons with just html?
Thanks for answers.

[Replicant]

This is for the first tab, change f code to whatever icon you want. Increment the 2 in parenthesis by 1 for each tab. You need a line like this for each tab.

#channel-tabbar > ul > li:nth-child(2) > a:before {content: "\f221";}

Keep in mind that with this code, if you have tabs that are only visible to logged in users, those tabs will need to be after the visible to guest tabs or it won't work. This is because we don't have a unique identifier for each tab, so we are selecting them in numerical sequence.

[rafail]

That code works fine on chrome, but on firefox and on internet explorer icons are not showing.
here is the code on my global css:

#channel-tabbar ul li:nth-child(2) a{
		content: url("/images/navbar_forum.png");
		}
#channel-tabbar ul li:nth-child(3) a{
		content: url("/images/navbar_articles.png");
		}

any help to make it show images on ie and firefox?

[Lynne]

Can we get a link to see this? The URL in the first post gives a 404 Not Found.

[rafail]

http://ello.net.co

But nevermind i moved icons to another place (below site logo) so i not need these icons anymore on navigation bar. I will leave them for one day so you can see the problem just for knowing.