How to add Font Awesome icons to the navigation bar?

[CarpCharacin]

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]

This in extra.less would do the trick:

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

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]

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.

 

[CarpCharacin]

Also, how do I add Font Awesome icons to the off-canvas menu?

 

[Russ]

Change the top line of my CSS:

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

Should work.

 

[CarpCharacin]

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

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

 

[Russ]

Whoops... I edited my post take a look.

 

[CarpCharacin]

That fixed the main problem, but the forum icon shows up next to my username.

 

[Russ]

Is that an add-on? Not showing on default XF.

 

[CarpCharacin]

No, it isn't an add-on. My username also shows up in the off canvas menu on XenForo.com when I'm logged in.

 

[Russ]

Whoops...

.p-offCanvasAccountLink a:before { display: none !important; }

Does that help?

 

[CarpCharacin]

Whoops...

.p-offCanvasAccountLink a:before { display: none !important; }

Does that help?

It worked, thanks! So I just put it below the existing CSS?

 

[Steve]

That is weird, I don't see that int he off canvas menu..

 

[Russ]

That is weird, I don't see that int he off canvas menu..

Very small view point, I was missing it too , happens when the user links collapse down.