XF 2.2 Not getting Font Awesome 5 Icons in Extra.less?

[Ablac]

I'm using the newest version of Xenforo, and when trying to set the icons in Extra.less I'm only getting FontAwesome 4 icons, not 5

All the icons work, except the Discord Icon shows up as [], but the icons are the old FontAwesome 4 icons for some reason

.p-navEl-link
{
    &:before
    {
        .m-faBase();
        .m-faContent(@fa-var-question-square);
        display:inline-block;
        text-align:center;
        margin-right:5px;
    }

    &[data-nav-id='home']:before {.m-faContent(@fa-var-home);}
    &[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='Admin']:before {.m-faContent(@fa-var-user-shield);}
    &[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
    &[data-nav-id='server']:before {.m-faContent(@fa-var-server);}
    &[data-nav-id='VIP']:before {.m-faContent(@fa-var-donate);}
    &[data-nav-id='Discord']:before {.m-faContent(@fa-var-discord);}
    &[data-nav-id='bans']:before {.m-faContent(@fa-var-ban);}
    &[data-nav-id='xfrm']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='xfmg']:before {.m-faContent(@fa-var-camera);}

    /* Forums Subnav*/
    &[data-nav-id='newPosts']:before {.m-faContent(@fa-var-search-plus);}
    &[data-nav-id='findThreads']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='searchForums']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='watched']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='markForumsRead']:before {.m-faContent(@fa-var-eye-slash);}
    &[data-nav-id='thIgnoreMore_ignored']:before {.m-faContent(@fa-var-times-circle);}

    /* WhatsNew Subnav */
    &[data-nav-id='whatsNewPosts']:before {.m-faContent(@fa-var-pencil);}
    &[data-nav-id='whatsNewProfilePosts']:before {.m-faContent(@fa-var-rss);}
    &[data-nav-id='whatsNewNewsFeed']:before {.m-faContent(@fa-var-star);}
    &[data-nav-id='xfmgWhatsNewNewMedia']:before {.m-faContent(@fa-var-images);}
    &[data-nav-id='xfmgWhatsNewMediaComments']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='xfrmNewResources']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='latestActivity']:before {.m-faContent(@fa-var-trophy);}

    /* XFMG Subnav */
    &[data-nav-id='xfmgNewMedia']:before {.m-faContent(@fa-var-images);}
    &[data-nav-id='xfmgNewComments']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='xfmgAddMedia']:before {.m-faContent(@fa-var-plus-square);}
    &[data-nav-id='xfmgYourContent']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='xfmgWatchedContent']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='xfmgSearchMedia']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='xfmgMarkViewed']:before {.m-faContent(@fa-var-eye-slash);}

    /* XFRM Subnav */
    &[data-nav-id='xfrmLatestReviews']:before {.m-faContent(@fa-var-balance-scale);}
    &[data-nav-id='xfrmYourResources']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='xfrmWatched']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='xfrmSearchResources']:before {.m-faContent(@fa-var-search);}

    /* Members Subnav */
    &[data-nav-id='currentVisitors']:before {.m-faContent(@fa-var-user-plus);}
    &[data-nav-id='newProfilePosts']:before {.m-faContent(@fa-var-pencil);}
    &[data-nav-id='searchProfilePosts']:before {.m-faContent(@fa-var-user-secret);}
    
    /* Profile Subnav */
    &[data-nav-id='defaultNewsFeed']:before {.m-faContent(@fa-var-newspaper);}
    &[data-nav-id='defaultLatestActivity']:before {.m-faContent(@fa-var-pencil);}
    &[data-nav-id='defaultYourProfile']:before {.m-faContent(@fa-var-id-card);}
    &[data-nav-id='defaultYourAccount']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='defaultLogOut']:before {.m-faContent(@fa-var-sign-out-alt);}
    &[data-nav-id='defaultRegister']:before {.m-faContent(@fa-var-plus-circle);}
}

 

[Russ]

Just curious, what leads you to believe that they're the version 4 of icons? Some folks get confused by the design of the icon which you can change between regular/solid/light by going to Style properties -> Typography -> Font Awesome weight

Discord is considered a "brand" icon so you need slightly different CSS:

.p-navEl-link[data-nav-id='Discord']:before { .m-faBase('Brands'); .m-faContent(@fa-var-discord); }

 

[Ablac]

Thank you Russ, That worked

I didn't realize you had to declare the different icon types like that THank you!

 

[Russ]

Thank you Russ, That worked

I didn't realize you had to declare the different icon types like that THank you!

You're welcome , just a heads up, I edited my post as it had slightly incorrect CSS in case you already copied it.

 

[Ablac]

Ya I noticed that haha, but I figured it out Thanks again!