What do I add to extra.less to add Font Awesome icons to the navigation bar like what I've done with my XF1 site? I'm currently working on porting the customizations I've made to Flat Awesome+ on my XF1 site over to XF2.


Pixel Exit Staff
This in extra.less would do the trick:

.p-nav-list .p-navEl-link
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f086";
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-right: 5px;
    &[data-nav-id="home"]:before { content: "\f015"; }
    &[data-nav-id="whatsNew"]:before { content: "\f0a1"; }
    &[data-nav-id="xfmg"]:before { content: "\f030"; }
    &[data-nav-id="xfrm"]:before { content: "\f085"; }
    &[data-nav-id="members"]:before { content: "\f0c0"; }

You can find the code by inspecting each link:


If you need help with additional tabs just let me know.

Stuff like this we'll work on either: getting it into the framework or providing a nice area for tutorials like this.


Pixel Exit Staff
Change the top line of my CSS:

.p-nav-list .p-navEl-link, .offCanvasMenu-linkHolder .offCanvasMenu-link:not(.offCanvasMenu-link--splitToggle)

Should work.
Last edited:

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.