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
    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.
    Bob likes this.

Recent Updates

  1. Removed left border

Recent Reviews

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