XF 2.2 Font awesome icons in public navigation

S

stromb0li

Active member
Hey xenForo SMEs,

What is the proper way to add icons to child items in the public navigation? I noticed I can use the <i> tags in the title and reference the fa icon, but I'd like to use the equivalent implementation in extra.less, so when 2.3 comes out the change won't be breaking.

Thank you!
 
Solution
mcatze
Check this resource => https://xenforo.com/community/resources/font-awesome-icons-in-navbar-for-2-1.6817/

For example, this is my extra.less

Less: 
/*** FontAwesome Icons in NavTab & AccountMenu ***/
.p-navEl-link,
.menu-linkRow,
.offCanvasMenu a
{                            
    &:before
    {
        .m-faBase();
        //.m-faContent(@fa-var-question-square);
        margin-right:5px;
        display:inline-block;
        text-align:center;
    }            
   
    &[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...
Sort by date Sort by votes
Check this resource => https://xenforo.com/community/resources/font-awesome-icons-in-navbar-for-2-1.6817/

For example, this is my extra.less

Less: 
/*** FontAwesome Icons in NavTab & AccountMenu ***/
.p-navEl-link,
.menu-linkRow,
.offCanvasMenu a
{                            
    &:before
    {
        .m-faBase();
        //.m-faContent(@fa-var-question-square);
        margin-right:5px;
        display:inline-block;
        text-align:center;
    }            
   
    &[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);}
    &[data-nav-id='EWRatendo']:before {.m-faContent(@fa-var-calendar-alt);}
    &[data-nav-id='EWRcarta']:before {.m-faContent(@fa-var-books);}
    &[data-nav-id='ld']:before {.m-faContent(@fa-var-link);}
    &[data-nav-id='dbtechEcommerce']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='dbtechEcommerceTickets']:before {.m-faContent(@fa-var-user-headset);}
    &[data-nav-id='xa_ams']:before {.m-faContent(@fa-var-lightbulb-o);}
    &[data-nav-id='xa_pickem']:before {.m-faContent(@fa-var-football-ball);}
    &[data-nav-id='xa_showcase']:before {.m-faContent(@fa-var-glasses);}
    &[data-nav-id='xa_sportsbook']:before {.m-faContent(@fa-var-donate);}
    &[data-nav-id='xa_rms']:before {.m-faContent(@fa-var-star-half-alt);}
    &[data-nav-id='th_donate']:before {.m-faContent(@fa-var-donate);}
    &[data-nav-id='tl_groups']:before {.m-faContent(@fa-var-users-class);}
    &[data-nav-id='siropuChat']:before {.m-faContent(@fa-var-comment-alt-smile);}
   
    /* Forums Subnav*/
    &[data-nav-id='thtrending']:before {.m-faContent(@fa-var-chart-line);}
    &[data-nav-id='newPosts']:before {.m-faContent(@fa-var-search-plus);}
    &[data-nav-id='findThreads']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='yourThreads']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='contributedThreads']:before {.m-faContent(@fa-var-comments-o);}
    &[data-nav-id='unansweredThreads']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='watched']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='watchedThreads']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='watchedForums']:before {.m-faContent(@fa-var-comments-o);}
    &[data-nav-id='searchForums']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='markForumsRead']:before {.m-faContent(@fa-var-eye-slash);}
    &[data-nav-id='todo']:before {.m-faContent(@fa-var-list);}
    &[data-nav-id='todoMy']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='todoCompleted']:before {.m-faContent(@fa-var-check);}
    &[data-nav-id='help']:before {.m-faContent(@fa-var-info);}
    &[data-nav-id='thstafftracker_staffThreads']:before {.m-faContent(@fa-var-user-shield);}
    &[data-nav-id='thIgnoreMore_ignored']:before {.m-faContent(@fa-var-eye-slash);}
    &[data-nav-id='thIgnoreMore_ignoredThreads']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='thIgnoreMore_ignoredForums']:before {.m-faContent(@fa-var-comments-alt);}
    &[data-nav-id='thfilters_all_threads']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='thfilters_latest_threads']:before {.m-faContent(@fa-var-comment-plus);}
    &[data-nav-id='thfilters_newest_threads']:before {.m-faContent(@fa-var-comment-lines);}
    &[data-nav-id='thfilters_trending_threads']:before {.m-faContent(@fa-var-comment-check);}
   
    /* 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-picture-o);}
    &[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-picture-o);}
    &[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='xfmgYourMedia']:before {.m-faContent(@fa-var-picture-o);}
    &[data-nav-id='xfmgYourAlbums']:before {.m-faContent(@fa-var-th);}
    &[data-nav-id='xfmgWatchedContent']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='xfmgWatchedMedia']:before {.m-faContent(@fa-var-picture-o);}
    &[data-nav-id='xfmgWatchedAlbums']:before {.m-faContent(@fa-var-th);}
    &[data-nav-id='xfmgWatchedCategories']:before {.m-faContent(@fa-var-th-list);}
    &[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='xfrmWatchedResources']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='xfrmWatchedCategories']:before {.m-faContent(@fa-var-th-large);}
    &[data-nav-id='xfrmSearchResources']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='xfa_rmmp_purchases']:before {.m-faContent(@fa-var-credit-card);}
    &[data-nav-id='xfa_rmmp_licenses']:before {.m-faContent(@fa-var-cloud-download);}
    &[data-nav-id='xfa_rmmp_dashboard']:before {.m-faContent(@fa-var-tachometer);}
   
    /* LD2 Subnav */
    &[data-nav-id='ldYourLinks']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='ldWatched']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='ldWatchedLinks']:before {.m-faContent(@fa-var-link);}
    &[data-nav-id='ldWatchedCategories']:before {.m-faContent(@fa-var-th-large);}

    /* Members Subnav */
    &[data-nav-id='registeredMembers']:before {.m-faContent(@fa-var-user-circle-o);}
    &[data-nav-id='dbtech_membermap_navbar']:before {.m-faContent(@fa-var-globe);}
    &[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);}
    &[data-nav-id='defaultNewsFeed']:before {.m-faContent(@fa-var-star);}
    &[data-nav-id='defaultLatestActivity']:before {.m-faContent(@fa-var-trophy);}
   
    /* EWRatendo Subnav*/
    &[data-nav-id='EWRatendo_monthly']:before {.m-faContent(@fa-var-calendar-o);}
    &[data-nav-id='EWRatendo_weekly']:before {.m-faContent(@fa-var-calendar-o);}
    &[data-nav-id='EWRatendo_agenda']:before {.m-faContent(@fa-var-calendar-check-o);}
    &[data-nav-id='EWRatendo_archive']:before {.m-faContent(@fa-var-archive);}
   
    /* EWRcarta Subnav*/
    &[data-nav-id='EWRcarta_pages']:before {.m-faContent(@fa-var-file-alt);}
    &[data-nav-id='EWRcarta_create']:before {.m-faContent(@fa-var-file-plus);}
    &[data-nav-id='EWRcarta_activity']:before {.m-faContent(@fa-var-trophy);}
    &[data-nav-id='EWRcarta_templates']:before {.m-faContent(@fa-var-file-code);}
   
    /* DB eCommerce Subnav*/
    &[data-nav-id='dbtechEcommerceLatestReviews']:before {.m-faContent(@fa-var-balance-scale);}
    &[data-nav-id='dbtechEcommerceYourAccount']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='dbtechEcommerceYourPurchasedLicenses']:before {.m-faContent(@fa-var-cart-arrow-down);}
    &[data-nav-id='dbtechEcommerceYourAddresses']:before {.m-faContent(@fa-var-address-book);}
    &[data-nav-id='dbtechEcommerceYourCreatedProducts']:before {.m-faContent(@fa-var-cart-plus);}
    &[data-nav-id='dbtechEcommerceWatched']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='dbtechEcommerceWatchedProducts']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='dbtechEcommerceWatchedCategories']:before {.m-faContent(@fa-var-th-large);}
    &[data-nav-id='dbtechEcommerceSearchProducts']:before {.m-faContent(@fa-var-search);}
   
    &[data-nav-id='dbtechEcommerceTicketsHome']:before {.m-faContent(@fa-var-search-plus);}
    &[data-nav-id='dbtechEcommerceTicketsStarted']:before {.m-faContent(@fa-var-user);}
   
    /* XA Articles Subnav*/
    &[data-nav-id='xa_amsNewArticles']:before {.m-faContent(@fa-var-newspaper-o);}
    &[data-nav-id='xa_amsNewComments']:before {.m-faContent(@fa-var-comments-o);}
    &[data-nav-id='xa_amsSeries']:before {.m-faContent(@fa-var-tasks);}
    &[data-nav-id='xa_amsYourArticles']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='xa_amsWatchedContent']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='xa_amsWatchedArticles']:before {.m-faContent(@fa-var-newspaper-o);}
    &[data-nav-id='xa_amsWatchedSeries']:before {.m-faContent(@fa-var-tasks);}
    &[data-nav-id='xa_amsWatchedCategories']:before {.m-faContent(@fa-var-th-large);}
    &[data-nav-id='xa_amsSearchArticles']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='xa_amsMarkRead']:before {.m-faContent(@fa-var-eye-slash);}
   
    /* Reviews Subnav*/
    &[data-nav-id='xa_rmsNewItems']:before {.m-faContent(@fa-var-newspaper-o);}
    &[data-nav-id='xa_rmsLatestContent']:before {.m-faContent(@fa-var-comments-o);}
    &[data-nav-id='xa_rmsLlatestReviews']:before {.m-faContent(@fa-var-comment-smile);}
    &[data-nav-id='xa_rmsLlatestQuestions']:before {.m-faContent(@fa-var-question-square);}
    &[data-nav-id='xa_rmsBrands']:before {.m-faContent(@fa-var-copyright);}
    &[data-nav-id='xa_rmsClaims']:before {.m-faContent(@fa-var-lightbulb-exclamation);}
    &[data-nav-id='xa_rmsYourContent']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='xa_rmsYourItems']:before {.m-faContent(@fa-var-newspaper-o);}
    &[data-nav-id='xa_rmsYourClaims']:before {.m-faContent(@fa-var-lightbulb-exclamation);}
    &[data-nav-id='xa_rmsYourReviews']:before {.m-faContent(@fa-var-comment-smile);}
    &[data-nav-id='xa_rmsYourQuestions']:before {.m-faContent(@fa-var-question-square);}
    &[data-nav-id='xa_rmsWatchedContent']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='xa_rmsWatchedItems']:before {.m-faContent(@fa-var-newspaper-o);}
    &[data-nav-id='xa_rmsWatchedCategories']:before {.m-faContent(@fa-var-th-large);}
    &[data-nav-id='xa_rmsSearchItems']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='xa_rmsMarkRead']:before {.m-faContent(@fa-var-eye-slash);}
   
    /* Pickem Subnav*/
    &[data-nav-id='xa_pkmNewComments']:before {.m-faContent(@fa-var-comments-o);}
    &[data-nav-id='xa_pkmPools']:before {.m-faContent(@fa-var-user);}
       &[data-nav-id='xa_pkmWatchedContent']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='xa_pkmWatchedPools']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='xa_pkmHOF']:before {.m-faContent(@fa-var-trophy-alt);}
    &[data-nav-id='xa_pkmSearchPickem']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='xa_pkmMarkRead']:before {.m-faContent(@fa-var-eye-slash);}
   
    /* Sportsbook Subnav*/
    &[data-nav-id='xa_sbNewEvents']:before {.m-faContent(@fa-var-calendar-alt);}
    &[data-nav-id='xa_sbMemberBets']:before {.m-faContent(@fa-var-users);}
       &[data-nav-id='xa_sbYourContent']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='xa_sbBetsYouCreated']:before {.m-faContent(@fa-var-trophy-alt);}
    &[data-nav-id='xa_sbBetsYouChallenged']:before {.m-faContent(@fa-var-trophy-alt);}
    &[data-nav-id='xa_sbYourWagers']:before {.m-faContent(@fa-var-trophy-alt);}
    &[data-nav-id='xa_sbYourEvents']:before {.m-faContent(@fa-var-trophy-alt);}
    &[data-nav-id='xa_sbWatchedContent']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='xa_sbWatchedBets']:before {.m-faContent(@fa-var-trophy);}
    &[data-nav-id='xa_sbWatchedEvents']:before {.m-faContent(@fa-var-calendar-alt);}
    &[data-nav-id='xa_sbWatchedCategories']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='xa_sbSearchEvents']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='xa_sbMarkRead']:before {.m-faContent(@fa-var-eye-slash);}
   
    /* Showcase Subnav*/
    &[data-nav-id='xa_scNewItems']:before {.m-faContent(@fa-var-glasses);}
    &[data-nav-id='xa_scNewComments']:before {.m-faContent(@fa-var-comments-o);}
       &[data-nav-id='xa_scLlatestReviews']:before {.m-faContent(@fa-var-balance-scale);}
    &[data-nav-id='xa_scYourItems']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='xa_scWatchedContent']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='xa_scWatchedItems']:before {.m-faContent(@fa-var-glasses);}
    &[data-nav-id='xa_scWatchedCategories']:before {.m-faContent(@fa-var-th-large);}
    &[data-nav-id='xa_scSearchItems']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='xa_scMarkRead']:before {.m-faContent(@fa-var-eye-slash);}
   
    /* Groups Subnav*/
    &[data-nav-id='tl_groups_search']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='tl_groups_managed']:before {.m-faContent(@fa-var-user);}
       &[data-nav-id='tl_groups_joined']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='tl_groups_upcomingEvents']:before {.m-faContent(@fa-var-calendar-check-o);}
   
    &[data-nav-id='defaultYourProfile']:before {.m-faContent(@fa-var-user-circle-o);}
    &[data-nav-id='defaultYourAccount']:before {.m-faContent(@fa-var-cogs);}

    &[href*="/whats-new/news-feed"]:before {.m-faContent(@fa-var-newspaper);}
    &[href*="/search/member?"]:before {.m-faContent(@fa-var-comments);}
    &[href*="/account/reactions"]:before {.m-faContent(@fa-var-thumbs-up);}
    &[href*="/account/alerts"]:before {.m-faContent(@fa-var-bell);}
    &[href*="/account/account-details"]:before {.m-faContent(@fa-var-cogs);}
    &[href*="/account/security"]:before {.m-faContent(@fa-var-lock);}
    &[href*="/account/privacy"]:before {.m-faContent(@fa-var-eye);}
    &[href*="/account/preferences"]:before {.m-faContent(@fa-var-cog);}
    &[href*="/account/signature"]:before {.m-faContent(@fa-var-pencil);}
    &[href*="/account/upgrades"]:before {.m-faContent(@fa-var-star);}
    &[href*="/account/connected-accounts"]:before {.m-faContent(@fa-var-cloud);}
    &[href*="/account/following"]:before {.m-faContent(@fa-var-user-plus);}
    &[href*="/account/ignored"]:before {.m-faContent(@fa-var-user-minus);}
    &[href*="/account/xenforo-license"]:before {.m-faContent(@fa-var-star);}
    &[href*="/logout"]:before {.m-faContent(@fa-var-power-off);}
}
 
Upvote 2 Downvote
Solution
Perfect! Here is what I ended up going with to get both the sub-nav menu and the dropdown.

Code: 
.p-navEl a:before, .menu-content 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, .menu-content a[data-nav-id='home']:before {.m-faContent("@{fa-var-home}");}
 
Upvote 1 Downvote
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
1
Views
163
Chris D
Chris D
K
Fixed Font Awesome Icon is not displayed with <xf:fa>
Replies
5
Views
428
Jeremy P
Jeremy P
JohnLogar
  • Solved
XF 2.2 Use image as icon in editor tool box icons
Replies
7
Views
201
JohnLogar
JohnLogar
smitpau
  • Question Question
XF 2.2 Change Font Awesome Icon
Replies
2
Views
854
smitpau
smitpau
Ferdinand
  • Question Question
XF 2.2 Button CSS/LESS emojis disappear in xf:button with gradient on hover tag
Replies
3
Views
365
stellaethra
stellaethra
Top Bottom