The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
#1
|
||||
|
||||
Add icons to the navigation bar!
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! |
#2
|
|||
|
|||
That link returns a server error
|
#3
|
||||
|
||||
sorry link updated
|
#4
|
||||
|
||||
Any Update?
|
#5
|
||||
|
||||
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 |
#6
|
||||
|
||||
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: Code:
.news { content: /f221; } .phones { content: /f004; } Can i add these icons with just html? Thanks for answers. |
#7
|
||||
|
||||
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.
Code:
#channel-tabbar > ul > li:nth-child(2) > a:before {content: "\f221";} |
#8
|
|||
|
|||
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: Code:
#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? |
#9
|
||||
|
||||
Can we get a link to see this? The URL in the first post gives a 404 Not Found.
|
#10
|
|||
|
|||
Code:
http://ello.net.co |
Thread Tools | |
Display Modes | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|