• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Font Awesome Navbar Icons before Navigation-Links with CSS

Font Awesome Navbar Icons before Navigation-Links with CSS 2014-08-19

No permission to download
This guide will teach you how to display icons before Navigation-Links in your Xenforo Navbar.

mauzao9

Well-known member
#3
Thank you for this! I see @Arty provided the codes for this, i'm using Black Responsive works nicely expect for this:


That small black line comes from where? hm
 
#6
Add on :
XenStaff
Xenmediagallery
[Nobita] Team
******* - Support Ticket
XenMediaGallery is allready included for the other ressources you just have to find the .class they are using. For example try .xenstaff for XenStaff. If you can't find which .class the addon uses you may contact the specific developer. Please contribute the .class names, if you know them. Thank you.

Thank you for this! I see @Arty provided the codes for this, i'm using Black Responsive works nicely expect for this:


That small black line comes from where? hm
Looks like a left border for the image. As you mentioned it I noticed it for me too. A simple line for each .class will remove this:
Code:
    border-left: none;
Updated the resource as well.

can you make one that has images only. I would like to remove the text from the nav bar.
You have to edit the templates for this case. See this resource in order to get to know how to do this. The advantage of the CSS editing is that you must not edit templates, disadvantage on the other hand is that you can't remove the titles.
 
#8
So if i do this it will remove the text links, and just leave the icons as the links?
Yes, use my CSS first and then try to remove the specific code in the templates for the link. It can be hard to find the right code to remove though.
However it is also possible to not use my CSS modification and only work with templates see the linked resource for further informations.
 

MattW

Well-known member
#11
This is my version:
upload_2014-9-20_1-41-25.png

Had to add an extra line into the css to change the colour of the FAicon when the tab is selected and hovered over
Code:
/*--icon color if tab is selected--*/
   .navTabs .navTab.shop.selected .navLink:before {color: #ff5857;}
   .navTabs .navTab.shop.selected:hover .navLink:before {color: #ff5857;}
 
#12
Hey @it_
How can we target custom created page / forum nodes that are added to navbar via the Nodes as Tabs addon?
Hello,
first you have to get to know the number of the specific node. You can easily find it by navigating to this note in your forum and taking a look on the webadress.

For example: www.your-domain.com/forums/nodename.8
Here you would need the number 8.

Than simply replace the .class with .nodetab8 in your CSS code.

Best regards
it_
 
#14
Hi, how to add Font Awesome to new tabs in Navbar?

For example via this mod: Custom Tabs i made new tabs forexamlpe ./pages/games ./pages/translations etc.

What i need to edit?

Code:
.navTabs .publicTabs .navTab .navLink:before
{
   color: #FFF;
   font-family: FontAwesome;
   font-weight: normal;
   margin-right: 5px;
}
.navTabs .navTab.forums .navLink:before
{
   content: "\f0e6";
}
 
#17
Trying to do this, it worked for first navlink but can't get it to work for "members" navlink... what did i do wrong ?
screenshot: https://gyazo.com/a61aa5943c25478982542c48ad22e57c
live website: http://www.libertaire.net/

my code:

Code:
/*=Font Awesome Icon: Forums=*/
.navTabs .navTab.forums .navLink:before
{
  display: block !important;
  font-family: FontAwesome;
  position: absolute;
  top: 0 px;
  left: 5px;
  border-left: none;
/*--icon to display--*/
  content: "\f03a";
/*--icon color--*/
  color: #FFF;
/*--icon size--*/
  font-size: 17px;
}
/*--icon color if tab is selected--*/
  .navTabs .navTab.forums.selected .navLink:before {color: #FFF;}
/*--icon color if mouse is hovered--*/
  .navTabs .navTab.forums:hover .navLink:before {color: #FFF;}
/*--adjust the px relative to the icon size--*/
  .navTabs .navTab.forums .navLink  { padding-left: 28px; }
   
   
   
   
/*=Font Awesome Icon: Forums=*/
.navTabs .navTab.members .navLink:before
{
  display: block !important;
  font-family: FontAwesome;
  position: absolute;
  top: 0 px;
  left: 5px;
  border-left: none;
/*--icon to display--*/
  content: "\f007";
/*--icon color--*/
  color: #FFF;
/*--icon size--*/
  font-size: 17px;
}
/*--icon color if tab is selected--*/
  .navTabs .navTab.members.selected .navLink:before {color: #FFF;}
/*--icon color if mouse is hovered--*/
  .navTabs .navTab.members:hover .navLink:before { color: #FFF;}
/*--adjust the px relative to the icon size--*/
  .navTabs .navTab.members.navLink  { padding-left: 28px; }