Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 22 Feb 2015, 14:56
Asama's Avatar
Asama Asama is offline
 
Join Date: Jul 2014
Real name: Asama
Question 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!
__________________
Visit us at Xtreme Developing. All about Android developing and other more...

Last edited by Asama; 26 Feb 2015 at 12:49.
Reply With Quote
  #2  
Old 22 Feb 2015, 21:22
Spangle Spangle is offline
 
Join Date: Jun 2011
That link returns a server error
Reply With Quote
  #3  
Old 26 Feb 2015, 12:50
Asama's Avatar
Asama Asama is offline
 
Join Date: Jul 2014
Real name: Asama
sorry link updated
__________________
Visit us at Xtreme Developing. All about Android developing and other more...
Reply With Quote
  #4  
Old 03 Mar 2015, 11:58
Asama's Avatar
Asama Asama is offline
 
Join Date: Jul 2014
Real name: Asama
Any Update?
__________________
Visit us at Xtreme Developing. All about Android developing and other more...
Reply With Quote
  #5  
Old 03 Mar 2015, 12:47
Replicant's Avatar
Replicant Replicant is offline
 
Join Date: Sep 2014
Real name: Mel
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
Reply With Quote
  #6  
Old 05 Mar 2015, 14:08
Asama's Avatar
Asama Asama is offline
 
Join Date: Jul 2014
Real name: 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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

??
Can i add these icons with just html?
Thanks for answers.
__________________
Visit us at Xtreme Developing. All about Android developing and other more...
Reply With Quote
  #7  
Old 06 Mar 2015, 02:46
Replicant's Avatar
Replicant Replicant is offline
 
Join Date: Sep 2014
Real name: Mel
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.

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.
Reply With Quote
  #8  
Old 01 Sep 2015, 18:52
rafail rafail is offline
 
Join Date: Aug 2015
Unhappy not showing on firefox and ie

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



any help to make it show images on ie and firefox?
Reply With Quote
  #9  
Old 01 Sep 2015, 20:48
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
Can we get a link to see this? The URL in the first post gives a 404 Not Found.
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #10  
Old 02 Sep 2015, 18:47
rafail rafail is offline
 
Join Date: Aug 2015

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.
Reply With Quote
  #11  
Old 02 Sep 2015, 22:46
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
I actually see the icons just fine in both Chrome and Firefox (I'm on a Mac, so I don't have IE), so I'm not sure what the issue would be.
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
Reply

Similar Threads
Thread Thread Starter Forum Replies Last Post
Mini Mods Add Icons to the Navigation Bar Tabs abdulbasitsaeed vBulletin 4.x Template Modifications 101 14 Aug 2015 22:56
Mini Mods Icons for UserCP Navigation 1.2 demgel vBulletin 3.7 Add-ons 266 14 Nov 2012 18:36
Mini Mods Icons for UserCP Navigation demgel vBulletin 3.7 Template Modifications 49 16 Dec 2008 11:38



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 02:29.

Layout Options | Width: Wide Color: