Font Awesome Icons in Navbar for 2.1

Font Awesome Icons in Navbar for 2.1

MrGibbs

Member
MrGibbs submitted a new resource:

Font Awesome Icons in Navbar for 2.1 - Font Awesome Icons in Navbar

Enter code in the extra.less

Before:
View attachment 188609

After:
View attachment 188610


Less:
.p-navEl a::before{
    font-family: 'Font Awesome 5 Pro';
    padding-right: 5px;
}

.p-navEl a[data-nav-id="home"]::before{content: "\f015";}
.p-navEl a[data-nav-id="forums"]::before{content: "\f27a";}
.p-navEl a[data-nav-id="whatsNew"]::before{content: "\f0e7";}
.p-navEl a[data-nav-id="xfmg"]::before{content...

Read more about this resource...
 
I've just seen it. :sneaky: I'm removing this plugin.
@MrGibbs , Add code MrGibbs :)
CSS:
.p-navEl a:before {
    .m-faBase();
    display: inline-block;
    text-align: center;
    margin-right:5px;
    border-radius:30px;
    line-height:normal;
}
.p-navEl a[data-nav-id='home']::before {content:"\f015";}
.p-navEl a[data-nav-id='forums']::before {content:"\f086";}
.p-navEl a[data-nav-id='whatsNew']::before {content:"\f128";}
.p-navEl a[data-nav-id='members']::before {content:"\f0c0";}
.p-navEl a[data-nav-id='xfrm']::before {content:"\f019";}
.p-navEl a[data-nav-id='xfmg']::before {content:"\f030";}
/* Submenu forum */
.p-navEl a[data-nav-id='newPosts']::before {content:"\f00e";}
.p-navEl a[data-nav-id='findThreads']::before {content:"\f002";}
.p-navEl a[data-nav-id='searchForums']::before {content:"\f002";}
.p-navEl a[data-nav-id='watched']::before {content:"\f06e";}
.p-navEl a[data-nav-id='markForumsRead']::before {content:"\f070";}
/* Submenu WhatsNew */
.p-navEl a[data-nav-id='whatsNewPosts']::before {content:"\f040";}
.p-navEl a[data-nav-id='whatsNewProfilePosts']::before {content:"\f09e";}
.p-navEl a[data-nav-id='whatsNewNewsFeed']::before {content:"\f005";}
.p-navEl a[data-nav-id='xfmgWhatsNewNewMedia']::before {content:"\f302";}
.p-navEl a[data-nav-id='xfmgWhatsNewMediaComments']::before {content:"\f086";}
.p-navEl a[data-nav-id='xfrmNewResources']::before {content:"\f019";}
.p-navEl a[data-nav-id='latestActivity']::before {content:"\f091";}
/* Submenu XFMG */
.p-navEl a[data-nav-id='xfmgNewMedia']::before {content:"\f302";}
.p-navEl a[data-nav-id='xfmgNewComments']::before {content:"\f086";}
.p-navEl a[data-nav-id='xfmgAddMedia']::before {content:"\f0fe";}
.p-navEl a[data-nav-id='xfmgYourContent']::before {content:"\f007";}
.p-navEl a[data-nav-id='xfmgWatchedContent']::before {content:"\f06e";}
.p-navEl a[data-nav-id='xfmgSearchMedia']::before {content:"\f002";}
.p-navEl a[data-nav-id='xfmgMarkViewed']::before {content:"\f070";}
/* Submenu XFRM */
.p-navEl a[data-nav-id='xfrmLatestReviews']::before {content:"\f24e";}
.p-navEl a[data-nav-id='xfrmYourResources']::before {content:"\f007";}
.p-navEl a[data-nav-id='xfrmWatched']::before {content:"\f06e";}
.p-navEl a[data-nav-id='xfrmSearchResources']::before {content:"\f002";}
/* Submenu Members */
.p-navEl a[data-nav-id='currentVisitors']::before {content:"\f234";}
.p-navEl a[data-nav-id='newProfilePosts']::before {content:"\f040";}
.p-navEl a[data-nav-id='searchProfilePosts']::before {content:"\f21b";}
I lifted what belongs to me. Thank's MrGibbs 👍
 
Use XF 2.1 tags ;)

Less:
.p-navEl a[data-nav-id='home']:before {.m-faContent("@{fa-var-home}");}

 
MrGibbs updated Font Awesome Icons in Navbar for 2.1 with a new update entry:

Navtab menu FA5FontAwesome 5

Less:
/* XenForo 2.1.x Navtab menu FontAwesome 5 - Start */
.p-navEl a:before {
    .m-faBase();
    display: inline-block;
    text-align: center;
    margin-right:5px;
    border-radius:30px;
    line-height:normal;
}
.p-navEl a[data-nav-id='home']:before {.m-faContent("@{fa-var-home}");}
.p-navEl a[data-nav-id='forums']:before {.m-faContent("@{fa-var-comments}");}
.p-navEl a[data-nav-id='whatsNew']:before {.m-faContent("@{fa-var-question}");}
.p-navEl...

Read the rest of this update entry...
 
@bousaid You're right. Its a bit too much. This is enough.
Less:
.p-navEl a:before {
    .m-faBase();
    display:inline-block;
    text-align:center;
    margin-right:5px;
}
 
This Code is maybe much more LESS.. ;)
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 */
 
Last edited:
You're right. Its a bit too much. This is enough.
Less:
.p-navEl a:before {
    .m-faBase();
    display:inline-block;
    text-align:center;
    margin-right:5px;
}
I use this
Less:
.p-navEl-link{                            
    &:before{.m-faBase();
    .m-faContent("@{fa-var-question-square}\20");
    }
    &[data-nav-id="home"]{&:before{.m-faContent("@{fa-var-home}\20");}}
    &[data-nav-id="forums"]{&:before{.m-faContent("@{fa-var-comments}\20");}}
}
 
With your hardcoded PRO you couldn't use the options in ACP the switch between light, regular and pro. But your default content is a good idea.. ;)

Why did you set \20 ? Is this for margin?

&[data-nav-id="home"]{&:before{.m-faContent("@{fa-var-home}\20");}}
The second & is too much. It is like an placeholder for using the same content in many rows. My opinion.. :unsure:
 
Last edited:
😁
Less:
.actionBar-action{                            
    &:before{
        margin-right: @xf-paddingSmall;
        display: inline-block;
    }
    &--edit:before{ .m-faContent("@{fa-var-pen}"); }
    &--report:before{ .m-faContent("@{fa-var-exclamation-circle}"); }
    &--ip:before{ .m-faContent("@{fa-var-user-secret}"); }
    &--delete:before{ .m-faContent("@{fa-var-trash-alt}"); }
    &--spam:before{ .m-faContent("@{fa-var-spider}"); }
    &--warn:before{ .m-faContent("@{fa-var-exclamation-triangle}"); }
    &--history:before{ .m-faContent("@{fa-var-history}"); }
}
189601
 
The more i read, search and test, the more i found out the little things in LESS and XF2.1

We use almost too much code. E.g.
Wrong: .m-faContent("@{fa-var-home}");
Right: .m-faContent(@fa-var-home);

189603
 
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."?
 
@MrGibbs How to add for custom navigation icon? We add this code with custom navigation icon but does not work and all icon hidden.

Code:
/* XenForo 2.1.x Navtab menu FontAwesome 5 - Start */
.p-navEl a:before {
    .m-faBase();
    display: inline-block;
    text-align: center;
    margin-right:5px;
    border-radius:30px;
    line-height:normal;
}
.p-navEl a[data-nav-id='home']:before {.m-faContent("@{fa-var-home}");}
.p-navEl a[data-nav-id='forums']:before {.m-faContent("@{fa-var-comments}");}
.p-navEl a[data-nav-id='whatsNew']:before {.m-faContent("@{fa-var-question}");}
.p-navEl a[data-nav-id='members']:before {.m-faContent("@{fa-var-users}");}
.p-navEl a[data-nav-id='xfrm']:before {.m-faContent("@{fa-var-download}");}
.p-navEl a[data-nav-id='xfmg']:before {.m-faContent("@{fa-var-camera}");}
.p-navEl a[data-nav-id='imagehost']:before {.m-faContent("@{fa-angle-double-up}");}
/* Forums Subnav*/
.p-navEl a[data-nav-id='newPosts']:before {.m-faContent("@{fa-var-search-plus}");}
.p-navEl a[data-nav-id='findThreads']:before {.m-faContent("@{fa-var-search}");}
.p-navEl a[data-nav-id='searchForums']:before {.m-faContent("@{fa-var-search}");}
.p-navEl a[data-nav-id='watched']:before {.m-faContent("@{fa-var-eye}");}
.p-navEl a[data-nav-id='markForumsRead']:before {.m-faContent("@{fa-var-eye-slash}");}
/* WhatsNew Subnav */
.p-navEl a[data-nav-id='whatsNewPosts']:before {.m-faContent("@{fa-var-pencil}");}
.p-navEl a[data-nav-id='whatsNewProfilePosts']:before {.m-faContent("@{fa-var-rss}");}
.p-navEl a[data-nav-id='whatsNewNewsFeed']:before {.m-faContent("@{fa-var-star}");}
.p-navEl a[data-nav-id='xfmgWhatsNewNewMedia']:before {.m-faContent("@{fa-var-images}");}
.p-navEl a[data-nav-id='xfmgWhatsNewMediaComments']:before {.m-faContent("@{fa-var-comments}");}
.p-navEl a[data-nav-id='xfrmNewResources']:before {.m-faContent("@{fa-var-download}");}
.p-navEl a[data-nav-id='latestActivity']:before {.m-faContent("@{fa-var-trophy}");}
/* XFMG Subnav */
.p-navEl a[data-nav-id='xfmgNewMedia']:before {.m-faContent("@{fa-var-images}");}
.p-navEl a[data-nav-id='xfmgNewComments']:before {.m-faContent("@{fa-var-comments}");}
.p-navEl a[data-nav-id='xfmgAddMedia']:before {.m-faContent("@{fa-var-plus-square}");}
.p-navEl a[data-nav-id='xfmgYourContent']:before {.m-faContent("@{fa-var-user}");}
.p-navEl a[data-nav-id='xfmgWatchedContent']:before {.m-faContent("@{fa-var-eye}");}
.p-navEl a[data-nav-id='xfmgSearchMedia']:before {.m-faContent("@{fa-var-search}");}
.p-navEl a[data-nav-id='xfmgMarkViewed']:before {.m-faContent("@{fa-var-eye-slash}");}
/* Members Subnav */
.p-navEl a[data-nav-id='currentVisitors']:before {.m-faContent("@{fa-var-user-plus}");}
.p-navEl a[data-nav-id='newProfilePosts']:before {.m-faContent("@{fa-var-pencil}");}
.p-navEl a[data-nav-id='searchProfilePosts']:before {.m-faContent("@{fa-var-user-secret}");}
/* XenForo 2.1.x Navtab menu FontAwesome 5 - End */
 
Back
Top Bottom