Unmaintained - Font Awesome Navbar Icons before Navigation-Links with CSS

Compatible XF 1.x versions

1.2
1.3
1.4

Additional requirements: Font Awesome

License: Creative Commons

Navbar Icons

Before:
After:

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