How to add Font Awesome icons to the navigation bar?

CarpCharacin

Registered
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.
 

Russ

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

Code:
.p-nav-list .p-navEl-link
{
    &:before
    {
    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:

Screenshot_1.png



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.
 

CarpCharacin

Registered
Thanks! I removed the parts for the home, XFRM and XFMG tabs, because I have the forum set as the home page, and I'm not using XFRM of XFMG.
 

Russ

Pixel Exit Staff
Change the top line of my CSS:

Code:
.p-nav-list .p-navEl-link, .offCanvasMenu-linkHolder .offCanvasMenu-link:not(.offCanvasMenu-link--splitToggle)
Should work.
 
Last edited:

CarpCharacin

Registered
There is an issue, the font awesome forums icon shows up on all of the menu arrows.
offcanvasmenu.PNG

My test site is on 2.0.2, but I haven't merged the outdated templates, I'm waiting for the style update.
 

Russ

Pixel Exit Staff
Whoops...

Code:
.p-offCanvasAccountLink a:before { display: none !important; }
Does that help?
 

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.