Font Awesome Icons in Navbar for 2.1

Font Awesome Icons in Navbar for 2.1

Overview Reviews (5) Discussion
M

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...
Click to expand...

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}");}

xenforo.com

XF 2.1 - What's new for developers in XF 2.1?

It's ok, developers, breathe a sigh of relief... We do have some good things for you in XF 2.1 but at a slightly smaller scale than the changes we introduced in XF 2.0 😉 Welcome to the seventh (admittedly developer oriented) "Have you seen...?" thread for XF 2.1. As ever, if you've not yet seen...
xenforo.com xenforo.com
 
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...
Click to expand...

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:
mcatze said:
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;
}
Click to expand...
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 */
 
You must log in or register to reply here.

Similar threads

Mr Lucky
  • Solved
XF 2.3 Font Awesome icons in CSS with 2.3
Replies
6
Views
752
Joe Link
Joe Link
Ablac
  • Question Question
XF 2.2 Not getting Font Awesome 5 Icons in Extra.less?
Replies
4
Views
2K
Ablac
Ablac
SyTry
Add Font Awesome icons to your usergroups
Replies
8
Views
4K
CtrlV
CtrlV
AscalonCZ
  • Question Question
XF 1.4 Font Awesome in navbar
Replies
3
Views
736
Russ
Russ
Back
Top Bottom