• 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

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

No permission to download
Compatible XF 1.x versions
1.2, 1.3, 1.4
Additional requirements
Font Awesome
License
Creative Commons
Navbar Icons

Before: before.jpg
After: after.jpg



1. Install Font Awesome
OPEN:
ACP > Appearance > Templates > PAGE_CONTAINER

FIND:
Code:
<head>
ADD AFTER:
Code:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

2. Add the Icon (in this case for Forums)
OPEN:
ACP > Appearance > Templates > EXTRA.css

ADD:
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; }

How to add icons for other tabs:

Each tab has its own .class, such as .forums for the Forums tab. In order to add an icon you need to know the .class for that specific tab and replace each ".forum" with that specific .class in the code above.

Following a list of .class for specific tabs:
  • Donation Manager: .donations
  • Forums: .forums
  • Home: .home
  • Members: .members
  • Showcase: .showcase
  • TaigaChat: .taigachat
  • XenGallery: .xengallery
  • (please feel free to add more to the discussion)
How to change the icon:

You can change the icon by editing the code in this section:
Code:
/*--icon to display--*/
    content: "\f03a";
Each item has a specific value. You can find all values here.
In order to chose the right icon you have to compare with the list here.

Following a list of suggested icon values:
  • Donation Manager: \f153
  • Forums: \f03a
  • Home: \f015
  • Members: \f153
  • Showcase: \f0f6
  • TaigaChat: \f086
  • XenGallery: \f03e
Credits
  1. Arty for pointing out the code with images.
  2. astronautweb.co for giving the CSS code for Font Awesome Icons.
Likes: Bob
Author
it_
Downloads
62
First release
Last update
Rating
5.00 star(s) 1 ratings

More resources from it_

Latest updates

  1. Removed left border

    A 1px left border could be seen if tab was active. Removed it with this additional line...

Latest reviews

Awesome work! ;) I love visual tweaks.