1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

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

  1. it_
    Compatible XF Versions:
    • 1.2
    • 1.3
    • 1.4
    Additional Requirements:
    Font Awesome
    Creative Commons
    Navbar Icons

    Before: before.jpg
    After: after.jpg

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

    <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)
    ACP > Appearance > Templates > EXTRA.css

    /*=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:
    /*--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
    1. Arty for pointing out the code with images.
    2. astronautweb.co for giving the CSS code for Font Awesome Icons.
    Bob likes this.

Recent Updates

  1. Removed left border

Recent Reviews

  1. mauzao9
    Version: 2014-08-19
    Awesome work! ;) I love visual tweaks.