Font Awesome Icons in Navbar for 2.1

[Gemma]

I tried adding one for Bob's blogs addon, but it isn't appearing right:

I believe the full code should be something like

.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='xa_ubs']:before {.m-faContent("@{fa-var-book}");}

So for UBS it should be

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

AMS would be....(change {fa-var-file} to suit)

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

 

[KensonPlays]

I believe the full code should be something like

.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='xa_ubs']:before {.m-faContent("@{fa-var-book}");}

So for UBS it should be

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

AMS would be....(change {fa-var-file} to suit)

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

Thanks, it was a bit confusing. (not a coder so I can't figure these things out on my own)

 

[mcatze]

Thanks, it was a bit confusing. (not a coder so I can't figure these things out on my own)

You can check the template setup_fa.less for the correct spelling and search the icon code at https://fontawesome.com/v5/search

For example: fa-user => @fa-var-user

 

[KensonPlays]

You can check the template setup_fa.less for the correct spelling and search the icon code at https://fontawesome.com/v5/search

For example: fa-user => @fa-var-user

Hmm, would it be possible to use that setup_fa to add a free v6 font? We use Guilded in our community, but that's a v6 FA, not v5.

 

[mcatze]

No that's not that easy..

 

[KensonPlays]

No that's not that easy..

That's a huge rip for me. I'd use that on my navbar since our community doesn't like Discord, and prefers the better option, Guilded, for live disussions.

 

[mcatze]

This is a part of XenForo, maybe in future versions. You have to take a look in the HYS section.. (https://xenforo.com/community/threads/boosting-performance-in-xenforo-2-3.216767/#post-1648280)

 

[CTS]

@MrGibbs How to add for custom navigation icon? We add this code with custom navigation icon but does not work and all icon hidden.

/* 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 */

I found that to be true for some fa icons.

You can substitute {fa-var-images} (for example) with the hex code for the icon.