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

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.

Back