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
Overview Updates (1) Reviews (1) History Discussion
Thank you for this! I see @Arty provided the codes for this, i'm using Black Responsive works nicely expect for this:
9Lw66ph.png


That small black line comes from where? hm
 
UnitySoft said:
Add on :
XenStaff
Xenmediagallery
[Nobita] Team
******* - Support Ticket
Click to expand...
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.

mauzao9 said:
Thank you for this! I see @Arty provided the codes for this, i'm using Black Responsive works nicely expect for this:
9Lw66ph.png


That small black line comes from where? hm
Click to expand...

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.

Daylight Carter said:
can you make one that has images only. I would like to remove the text from the nav bar.
Click to expand...
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.
 
Daylight Carter said:
So if i do this it will remove the text links, and just leave the icons as the links?
Click to expand...

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.
 
This is my version:
upload_2014-9-20_1-41-25.webp

Had to add an extra line into the css to change the colour of the FAicon when the tab is selected and hovered over
Rich (BB code): 
/*--icon color if tab is selected--*/
   .navTabs .navTab.shop.selected .navLink:before {color: #ff5857;}
   .navTabs .navTab.shop.selected:hover .navLink:before {color: #ff5857;}
 
mauzao9 said:
Hey @it_
How can we target custom created page / forum nodes that are added to navbar via the Nodes as Tabs addon?
Click to expand...

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_
 
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";
}
 
For my members link do I type the code like this:

{
members: "\f0o6";
}
?
Same with other sections, like admins, donate and so on.
 
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; }
 
You must log in or register to reply here.
Back
Top Bottom