XF 2.1 Font Awesome icon for public navigation?

Ludachris

Ludachris

Well-known member
Just checking if it's possible to use a FA icon in the public nav, and if so, what would the syntax be?
 
Sort by date Sort by votes
@Ludaschris if it's for a site that's using one of our styles (I know you have at least one), we have an option for it: Style properties -> Header and navigation. We have two different ways to display FA icons in the navigation.

For a simple CSS edit:

Code: 
a.p-navEl-link:before, a.offCanvasMenu-link:before
{
   .m-faBase();
    text-align: center;
    display: inline-block;
    width: (20em / 16);
    margin-right: 5px;
}
.p-pageWrapper
{
    a[data-nav-id="home"]:before { .m-faContent("\f015"); }
    a[data-nav-id="forums"]:before { .m-faContent("\f086"); }
    a[data-nav-id="members"]:before { .m-faContent("\f0c0"); }
    a[data-nav-id="xfrm"]:before { .m-faContent("\f013"); }
    a[data-nav-id="whatsNew"]:before { .m-faContent("\f0e7"); }
    a[data-nav-id="EWRrio"]:before { .m-faContent("\f1e8"); }
    a[data-nav-id="xfmg"]:before { .m-faContent("\f03d"); }
    a[data-nav-id="snog_raffles_navtab"]:before { .m-faContent("\f145"); }
    a[data-nav-id="th_donate"]:before { .m-faContent("\f2b5"); }
    a[data-nav-id="EWRatendo"]:before { .m-faContent(@fa-var-calendar-alt); }
    a[data-nav-id="EWRcarta"]:before { .m-faContent(@fa-var-book); }
    a[data-nav-id="EWRdiscord"]:before { .m-faContent(@fa-var-discord); .m-faBase('Brands'); }
    a[data-nav-id="EWRmedio"]:before { .m-faContent(@fa-var-video-plus); }
    a[data-nav-id="EWRporta"]:before { .m-faContent(@fa-var-home); }
    a[data-nav-id="EWRrio"]:before { .m-faContent(@fa-var-play-circle); }
    a[data-nav-id="EWRtorneo"]:before { .m-faContent(@fa-var-trophy); }
    a[data-nav-id="xa_ams"]:before { .m-faContent("\f15c"); }
    a[data-nav-id="xa_ubs"]:before { .m-faContent("\f303"); }
    a[data-nav-id="xa_showcase"]:before { .m-faContent("\f00b"); }
    a[data-nav-id="xa_sportsbook"]:before { .m-faContent("\f091"); }
    a[data-nav-id="xa_pickem"]:before { .m-faContent("\f51e"); }
}

Should do the trick.
 
Upvote 1 Downvote
Ludachris said:
Yes @Mian Shahid , just like that - though I would like to test only displaying an icon, without text.
Click to expand...
Put something like below to your extra.less

PHP: 
/* 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='jz_popularcontent']:before {.m-faContent("@{fa-var-fire}");}
/* 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='latestActivity']:before {.m-faContent("@{fa-var-trophy}");}
/* 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 */
 
Upvote 0 Downvote
If you don't mind me asking here, how would we do a specific forum node? Not all of them. Let's say you have a link forum and want to change the paper clip, but not for all link forums. Is there CSS? Thanks!
 
Upvote 0 Downvote
beerForo said:
I am!
Click to expand...
Do something like below in your EXTRA.LESS with change the nod ID number [node--id77] marked in RED to your appropriate ID number
PHP: 
/* Node Icon Change [Courses] - Start */
.node--forum.node--id77.node--unread .node-icon i:before {
    content: "\f51b";
}

.node--forum.node--id77.node--read .node-icon i:before {
    content: "\f51b";
}
/* Node Icon Change [Courses] - END */
 
Upvote 0 Downvote
This was great info and I've got all the icons the way I want!
But one looks better as the light font awesome (fal), any way to have a specific one light?
Thanks again, appreciated!
 
Upvote 0 Downvote
I saw this thread when I was browsing.

For the navigation bar, an alternative (and less trouble) method is simply adding an idiomatic text element (<i>) with the icon class in front of the navigation item title.

HTML: 
<i class="fa fa-fw fa-home"></i> Home

1617513593989.webp

Result:
1617513803535.webp
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

S
  • Solved
XF 2.2 Font awesome icons in public navigation
Replies
2
Views
435
stromb0li
S
C
  • Question Question
XF 2.2 Hide public navigation on desktop
Replies
3
Views
200
Russ
Russ
K
Fixed Font Awesome Icon is not displayed with <xf:fa>
Replies
5
Views
442
Jeremy P
Jeremy P
smitpau
  • Question Question
XF 2.2 Change Font Awesome Icon
Replies
2
Views
861
smitpau
smitpau
Alternadiv
  • Suggestion Suggestion
Lack of interest Better sorting for public navigation links; use widget placement system
Replies
0
Views
435
Alternadiv
Alternadiv
Top Bottom