Font Awesome Icons in Navbar for 2.1

Font Awesome Icons in Navbar for 2.1

Try this. Its works well for me..
Less:
/* XenForo 2.1.x Navtab menu FontAwesome 5 - Start */
.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='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);}

    /* 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);}

    /* 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);}
}
/* XenForo 2.1.x Navtab menu FontAwesome 5 - End */
 
You could check if the brand icon is implemented into XenForo FA Template, or you use the "f270" tag from FA Gallery.

View attachment 224443

Is there a special icon and place you want to use?

my issue is mixing brand FA with regular FA. no matter how i enter "fab" brand icons they won't display. have tried .m-faBase(brands) in the code below bit breaks everything. i am sure it is a syntax thing ... i do not have a PHD in CSS :p

so Steam, Discord and Twitch are brands of course ... all the others are regular.

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

    &[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
    &[data-nav-id='serverstuff']:before {.m-faContent(@fa-var-tools);}
    &[data-nav-id='steamauth']:before {.m-faContent(@fa-var-question);}
    &[data-nav-id='twitch']:before {.m-faContent(@fa-var-question);}
    &[data-nav-id='discord']:before {.m-faContent(@fa-var-question);}
    &[data-nav-id='xfmg']:before {.m-faContent(@fa-var-camera);}
 
@Craig Neff Try this.. :cool:
Less:
.p-navEl-link
{
    &:before
    {
        .m-faBase();
        .m-faContent(@fa-var-question-square);
        display:inline-block;
        text-align:center;
        margin-right:5px;
    }

    &[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
    &[data-nav-id='serverstuff']:before {.m-faContent(@fa-var-tools);}
    &[data-nav-id='steamauth']:before {.m-faBase('Brands');.m-faContent(@fa-var-steam);}
    &[data-nav-id='twitch']:before {.m-faBase('Brands');.m-faContent(@fa-var-twitch);}
    &[data-nav-id='discord']:before {.m-faBase('Brands');.m-faContent(@fa-var-discord);}
    &[data-nav-id='xfmg']:before {.m-faContent(@fa-var-camera);}
 
@Craig Neff Try this.. :cool:
Less:
.p-navEl-link
{
    &:before
    {
        .m-faBase();
        .m-faContent(@fa-var-question-square);
        display:inline-block;
        text-align:center;
        margin-right:5px;
    }

    &[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
    &[data-nav-id='serverstuff']:before {.m-faContent(@fa-var-tools);}
    &[data-nav-id='steamauth']:before {.m-faBase('Brands');.m-faContent(@fa-var-steam);}
    &[data-nav-id='twitch']:before {.m-faBase('Brands');.m-faContent(@fa-var-twitch);}
    &[data-nav-id='discord']:before {.m-faBase('Brands');.m-faContent(@fa-var-discord);}
    &[data-nav-id='xfmg']:before {.m-faContent(@fa-var-camera);}

you sir, are pretty f'n awesome. many thanks !
 
I think it is. Hide the text or text as hover. I will take a look.

This is quick & dirty.. :p

Yeah. I tried it by luck. :D

Do you have any idea how to change these triangles to different ones for each menu? i.e. All 1, 2, 3 and 4 are different icons.

1600873723831.webp
 
Do you have any idea how to change these triangles to different ones for each menu? i.e. All 1, 2, 3 and 4 are different icons.
Pretty easy. You have to search for the data-xf-key (e.g. 3) and set up this in your extra.less
Less:
.p-navEl-splitTrigger {
    &[data-xf-key='1']:after { content: "\f192"; }
    &[data-xf-key='2']:after { content: "\f192"; }
    &[data-xf-key='3']:after { content: "\f192"; }
    &[data-xf-key='4']:after { content: "\f192"; }
    &[data-xf-key='5']:after { content: "\f192"; }
}
 
Cool that works! I found data-xf-key='1' made them different but couldn't relate them together with codes.
 
Can we have different things on top navigation and off-canvas menu?
Not different, but you can easily do :before and :after ...
CSS:
a.offCanvasMenu-link {
    &[data-nav-id='whats-new']:after { content: "!!"; }
}
 
@Mouth Thanks! Didn't have the chance to try it until now. It works!

But there's no style applied to the text.

1600950648976.webp
 
Last edited:
Thanks for this resource. I have the icons appearing in the navigation bar on desktop. However I want to add them to the mobile as well. I am trying

Code:
.offCanvasMenu a[href*="/forums/Australia"]:before {.m-faContent("@{fa-var-globe}");}

Which is finding the right spot in the menu before the Australia category, but it's not displaying the FA icon - it's the missing icon box. Is it the "m."?
I have the same problem :/
 
I tried adding one for Bob's blogs addon, but it isn't appearing right:
Code:
.p-navEl a[data-nav-id='searchProfilePosts']:before {.m-faContent("@{fa-var-user-secret}");}
/* Blogs Subnav */
.p-navEl a[data-nav-id='xa_ubs']:before {.m-faContent("@{fas fa-book}");}
/* XenForo 2.1.x Navtab menu FontAwesome 5 - End */

1710276942465.webp

How do I properly add it to addons like UBS and AMS? Tried modifying it to 'fas-var-fa-book' and that didn't work either.
 
Last edited:
Top Bottom