vb.org Archive - Add icons to the navigation bar!

Page 1 of 2

Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB5 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=263)

- - Add icons to the navigation bar! (https://vborg.vbsupport.ru/showthread.php?t=317463)

Asama

02-22-2015 01:56 PM

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!

Spangle

02-22-2015 08:22 PM

That link returns a server error

Asama

02-26-2015 11:50 AM

sorry link updated

Asama

03-03-2015 10:58 AM

Any Update?

Replicant

03-03-2015 11:47 AM

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

03-05-2015 01:08 PM

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.

Replicant

03-06-2015 01:46 AM

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

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

09-01-2015 04:52 PM

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?

Lynne

09-01-2015 06:48 PM

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

rafail

09-02-2015 04:47 PM

Code:

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.

All times are GMT. The time now is 05:35 PM.

Page 1 of 2

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01203 seconds Memory Usage 1,726KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (4)bbcode_code_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: