XenForo Adding Icons to the Navbar and Pop-up Menu

[Misterman]

This doesn't work on XenForo 2.2 editions. You get a square icon box where the icons are supposed to be.

Any solution?

Change:
font-family: FontAwesome;
By :
font-family: 'Font Awesome 5 Pro';

 

[serves]

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

&[data-nav-id='home']:before {.m-faContent(@fa-var-home);}
&[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
&[data-nav-id='whatsNew']:before {.m-faContent(@fa-var-question);}
&[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
&[data-nav-id='xfrm']:before {.m-faContent(@fa-var-download);}
&[data-nav-id='xfmg']:before {.m-faContent(@fa-var-camera);}

&[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='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);}

&[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);}

&[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);}

&[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);}
}

 

[aab985030]

That works! for 2.2 thanks!

 

[aab985030]

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

&[data-nav-id='home']:before {.m-faContent(@fa-var-home);}
&[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
&[data-nav-id='whatsNew']:before {.m-faContent(@fa-var-question);}
&[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
&[data-nav-id='xfrm']:before {.m-faContent(@fa-var-download);}
&[data-nav-id='xfmg']:before {.m-faContent(@fa-var-camera);}

&[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='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);}

&[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);}

&[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);}

&[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);}
}

This works in 2.3 but the one I posted doesn't. Thanks for posting this!