xF2 Font Awesome Icons in Navbar for 2.1

  • Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

Radio

    ven0m

    ven0m

    Administrator
    Staff member
    Administrator
    Moderator
    Platinum
    xenForo 2.x.x
    xenForo 1.x.x
    Contributor
    vBulletin All Access Pass
    The Chest
    Verified
    Ultra Platinum VIP
    Platinum VIP
    Gold VIP
    Silver VIP
    Premium
    Member
    Jul 17, 2005
    20,497
    7,735
    321
    localhost
    Heisenberg submitted a new resource:

    You must be registered for see links
    - Font Awesome Icons in Navbar

    Enter code in the extra.less

    Before:
    You must be registered for see images attach

    After:
    You must be registered for see images attach

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

    You must be registered for see links
     
    ven0m

    ven0m

    Administrator
    Staff member
    Administrator
    Moderator
    Platinum
    xenForo 2.x.x
    xenForo 1.x.x
    Contributor
    vBulletin All Access Pass
    The Chest
    Verified
    Ultra Platinum VIP
    Platinum VIP
    Gold VIP
    Silver VIP
    Premium
    Member
    Jul 17, 2005
    20,497
    7,735
    321
    localhost
    This one doesn't have all Xenforo's tabs with icons, but also it doesn't show the FA icons on dropdown menus and phone versions.
    These are my small modifications
    1) Show FA on desktop

    Code: 
    /* Navigation Menu Icons - START */
.p-navEl a:before {
    .m-faBase();
    display: inline-block;
    text-align: center;
    margin-right:5px;
    border-radius:30px;
    line-height:normal;
}
/* Main Nav */
.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}");}
/* Forums Subnav*/
.p-navEl a[data-nav-id='newPosts']:before {.m-faContent("@{fa-var-search-plus}");}
.p-navEl a[data-nav-id='yourThreads']:before {.m-faContent("@{fa-var-pencil}");}
.p-navEl a[data-nav-id='contributedThreads']:before {.m-faContent("@{fa-var-pencil}");}
.p-navEl a[data-nav-id='unansweredThreads']:before {.m-faContent("@{fa-var-pencil}");}
.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='watchedThreads']:before {.m-faContent("@{fa-var-pencil}");}
.p-navEl a[data-nav-id='watchedForums']:before {.m-faContent("@{fa-var-comments}");}
.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='xfmgYourMedia']:before {.m-faContent("@{fa-var-camera}");}
.p-navEl a[data-nav-id='xfmgYourAlbums']:before {.m-faContent("@{fa-var-images}");}
.p-navEl a[data-nav-id='xfmgWatchedContent']:before {.m-faContent("@{fa-var-eye}");}
.p-navEl a[data-nav-id='xfmgWatchedMedia']:before {.m-faContent("@{fa-var-camera}");}
.p-navEl a[data-nav-id='xfmgWatchedAlbums']:before {.m-faContent("@{fa-var-images}");}
.p-navEl a[data-nav-id='xfmgWatchedCategories']:before {.m-faContent("@{fa-var-images}");}
.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}");}
/* XFRM Subnav */
.p-navEl a[data-nav-id='xfrmLatestReviews']:before {.m-faContent("@{fa-var-balance-scale}");}
.p-navEl a[data-nav-id='xfrmYourResources']:before {.m-faContent("@{fa-var-user}");}
.p-navEl a[data-nav-id='xfrmWatched']:before {.m-faContent("@{fa-var-eye}");}
.p-navEl a[data-nav-id='xfrmWatchedResources']:before {.m-faContent("@{fa-var-download}");}
.p-navEl a[data-nav-id='xfrmWatchedCategories']:before {.m-faContent("@{fa-var-download}");}
.p-navEl a[data-nav-id='xfrmSearchResources']:before {.m-faContent("@{fa-var-search}");}
/* Members Subnav */
.p-navEl a[data-nav-id='registeredMembers']:before {.m-faContent("@{fa-var-users}");}
.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}");}
/* Uncategorised Subnav */
.p-navEl a[data-nav-id='defaultNewsFeed']:before {.m-faContent("@{fa-var-rss}");}
.p-navEl a[data-nav-id='defaultLatestActivity']:before {.m-faContent("@{fa-var-trophy}");}
.p-navEl a[data-nav-id='defaultYourProfile']:before {.m-faContent("@{fa-var-user}");}
.p-navEl a[data-nav-id='defaultYourAccount']:before {.m-faContent("@{fa-var-edit}");}
.p-navEl a[data-nav-id='defaultRegister']:before {.m-faContent("@{fa-var-plus-square}");}
.p-navEl a[data-nav-id='defaultLogOut']:before {.m-faContent("@{fa-var-sign-out-alt}");}
/* Navigation Menu Icons - END */

    2) Show FA on dropdown menu
    Code: 
    /* Navigation Menu Icons - Dropdown Menu - START */
.menu a:before {
    .m-faBase();
    display: inline-block;
    text-align: center;
    margin-right:5px;
    border-radius:30px;
    line-height:normal;
}
/* Main Nav */
.menu a[data-nav-id='home']:before {.m-faContent("@{fa-var-home}");}
.menu a[data-nav-id='forums']:before {.m-faContent("@{fa-var-comments}");}
.menu a[data-nav-id='whatsNew']:before {.m-faContent("@{fa-var-question}");}
.menu a[data-nav-id='members']:before {.m-faContent("@{fa-var-users}");}
.menu a[data-nav-id='xfrm']:before {.m-faContent("@{fa-var-download}");}
.menu a[data-nav-id='xfmg']:before {.m-faContent("@{fa-var-camera}");}
/* Forums Subnav*/
.menu a[data-nav-id='newPosts']:before {.m-faContent("@{fa-var-search-plus}");}
.menu a[data-nav-id='yourThreads']:before {.m-faContent("@{fa-var-pencil}");}
.menu a[data-nav-id='contributedThreads']:before {.m-faContent("@{fa-var-pencil}");}
.menu a[data-nav-id='unansweredThreads']:before {.m-faContent("@{fa-var-pencil}");}
.menu a[data-nav-id='findThreads']:before {.m-faContent("@{fa-var-search}");}
.menu a[data-nav-id='searchForums']:before {.m-faContent("@{fa-var-search}");}
.menu a[data-nav-id='watched']:before {.m-faContent("@{fa-var-eye}");}
.menu a[data-nav-id='watchedThreads']:before {.m-faContent("@{fa-var-pencil}");}
.menu a[data-nav-id='watchedForums']:before {.m-faContent("@{fa-var-comments}");}
.menu a[data-nav-id='markForumsRead']:before {.m-faContent("@{fa-var-eye-slash}");}
/* WhatsNew Subnav */
.menu a[data-nav-id='whatsNewPosts']:before {.m-faContent("@{fa-var-pencil}");}
.menu a[data-nav-id='whatsNewProfilePosts']:before {.m-faContent("@{fa-var-rss}");}
.menu a[data-nav-id='whatsNewNewsFeed']:before {.m-faContent("@{fa-var-star}");}
.menu a[data-nav-id='xfmgWhatsNewNewMedia']:before {.m-faContent("@{fa-var-images}");}
.menu a[data-nav-id='xfmgWhatsNewMediaComments']:before {.m-faContent("@{fa-var-comments}");}
.menu a[data-nav-id='xfrmNewResources']:before {.m-faContent("@{fa-var-download}");}
.menu a[data-nav-id='latestActivity']:before {.m-faContent("@{fa-var-trophy}");}
/* XFMG Subnav */
.menu a[data-nav-id='xfmgNewMedia']:before {.m-faContent("@{fa-var-images}");}
.menu a[data-nav-id='xfmgNewComments']:before {.m-faContent("@{fa-var-comments}");}
.menu a[data-nav-id='xfmgAddMedia']:before {.m-faContent("@{fa-var-plus-square}");}
.menu a[data-nav-id='xfmgYourContent']:before {.m-faContent("@{fa-var-user}");}
.menu a[data-nav-id='xfmgYourMedia']:before {.m-faContent("@{fa-var-camera}");}
.menu a[data-nav-id='xfmgYourAlbums']:before {.m-faContent("@{fa-var-images}");}
.menu a[data-nav-id='xfmgWatchedContent']:before {.m-faContent("@{fa-var-eye}");}
.menu a[data-nav-id='xfmgWatchedMedia']:before {.m-faContent("@{fa-var-camera}");}
.menu a[data-nav-id='xfmgWatchedAlbums']:before {.m-faContent("@{fa-var-images}");}
.menu a[data-nav-id='xfmgWatchedCategories']:before {.m-faContent("@{fa-var-images}");}
.menu a[data-nav-id='xfmgSearchMedia']:before {.m-faContent("@{fa-var-search}");}
.menu a[data-nav-id='xfmgMarkViewed']:before {.m-faContent("@{fa-var-eye-slash}");}
/* XFRM Subnav */
.menu a[data-nav-id='xfrmLatestReviews']:before {.m-faContent("@{fa-var-balance-scale}");}
.menu a[data-nav-id='xfrmYourResources']:before {.m-faContent("@{fa-var-user}");}
.menu a[data-nav-id='xfrmWatched']:before {.m-faContent("@{fa-var-eye}");}
.menu a[data-nav-id='xfrmWatchedResources']:before {.m-faContent("@{fa-var-download}");}
.menu a[data-nav-id='xfrmWatchedCategories']:before {.m-faContent("@{fa-var-download}");}
.menu a[data-nav-id='xfrmSearchResources']:before {.m-faContent("@{fa-var-search}");}
/* Members Subnav */
.menu a[data-nav-id='registeredMembers']:before {.m-faContent("@{fa-var-users}");}
.menu a[data-nav-id='currentVisitors']:before {.m-faContent("@{fa-var-user-plus}");}
.menu a[data-nav-id='newProfilePosts']:before {.m-faContent("@{fa-var-pencil}");}
.menu a[data-nav-id='searchProfilePosts']:before {.m-faContent("@{fa-var-user-secret}");}
/* Uncategorised Subnav */
.menu a[data-nav-id='defaultNewsFeed']:before {.m-faContent("@{fa-var-rss}");}
.menu a[data-nav-id='defaultLatestActivity']:before {.m-faContent("@{fa-var-trophy}");}
.menu a[data-nav-id='defaultYourProfile']:before {.m-faContent("@{fa-var-user}");}
.menu a[data-nav-id='defaultYourAccount']:before {.m-faContent("@{fa-var-edit}");}
.menu a[data-nav-id='defaultRegister']:before {.m-faContent("@{fa-var-plus-square}");}
.menu a[data-nav-id='defaultLogOut']:before {.m-faContent("@{fa-var-sign-out-alt}");}
/* Navigation Menu Icons - Dropdown Menu - END */

    3) Show FA on mobile
    Code: 
    /* Navigation Menu Icons - Mobile - START */
.offCanvasMenu a:before {
    .m-faBase();
    display: inline-block;
    text-align: center;
    margin-right:5px;
    border-radius:30px;
    line-height:normal;
}
/* Main Nav */
.offCanvasMenu a[data-nav-id='home']:before {.m-faContent("@{fa-var-home}");}
.offCanvasMenu a[data-nav-id='forums']:before {.m-faContent("@{fa-var-comments}");}
.offCanvasMenu a[data-nav-id='whatsNew']:before {.m-faContent("@{fa-var-question}");}
.offCanvasMenu a[data-nav-id='members']:before {.m-faContent("@{fa-var-users}");}
.offCanvasMenu a[data-nav-id='xfrm']:before {.m-faContent("@{fa-var-download}");}
.offCanvasMenu a[data-nav-id='xfmg']:before {.m-faContent("@{fa-var-camera}");}
/* Forums Subnav*/
.offCanvasMenu a[data-nav-id='newPosts']:before {.m-faContent("@{fa-var-search-plus}");}
.offCanvasMenu a[data-nav-id='yourThreads']:before {.m-faContent("@{fa-var-pencil}");}
.offCanvasMenu a[data-nav-id='contributedThreads']:before {.m-faContent("@{fa-var-pencil}");}
.offCanvasMenu a[data-nav-id='unansweredThreads']:before {.m-faContent("@{fa-var-pencil}");}
.offCanvasMenu a[data-nav-id='findThreads']:before {.m-faContent("@{fa-var-search}");}
.offCanvasMenu a[data-nav-id='searchForums']:before {.m-faContent("@{fa-var-search}");}
.offCanvasMenu a[data-nav-id='watched']:before {.m-faContent("@{fa-var-eye}");}
.offCanvasMenu a[data-nav-id='watchedThreads']:before {.m-faContent("@{fa-var-pencil}");}
.offCanvasMenu a[data-nav-id='watchedForums']:before {.m-faContent("@{fa-var-comments}");}
.offCanvasMenu a[data-nav-id='markForumsRead']:before {.m-faContent("@{fa-var-eye-slash}");}
/* WhatsNew Subnav */
.offCanvasMenu a[data-nav-id='whatsNewPosts']:before {.m-faContent("@{fa-var-pencil}");}
.offCanvasMenu a[data-nav-id='whatsNewProfilePosts']:before {.m-faContent("@{fa-var-rss}");}
.offCanvasMenu a[data-nav-id='whatsNewNewsFeed']:before {.m-faContent("@{fa-var-star}");}
.offCanvasMenu a[data-nav-id='xfmgWhatsNewNewMedia']:before {.m-faContent("@{fa-var-images}");}
.offCanvasMenu a[data-nav-id='xfmgWhatsNewMediaComments']:before {.m-faContent("@{fa-var-comments}");}
.offCanvasMenu a[data-nav-id='xfrmNewResources']:before {.m-faContent("@{fa-var-download}");}
.offCanvasMenu a[data-nav-id='latestActivity']:before {.m-faContent("@{fa-var-trophy}");}
/* XFMG Subnav */
.offCanvasMenu a[data-nav-id='xfmgNewMedia']:before {.m-faContent("@{fa-var-images}");}
.offCanvasMenu a[data-nav-id='xfmgNewComments']:before {.m-faContent("@{fa-var-comments}");}
.offCanvasMenu a[data-nav-id='xfmgAddMedia']:before {.m-faContent("@{fa-var-plus-square}");}
.offCanvasMenu a[data-nav-id='xfmgYourContent']:before {.m-faContent("@{fa-var-user}");}
.offCanvasMenu a[data-nav-id='xfmgYourMedia']:before {.m-faContent("@{fa-var-camera}");}
.offCanvasMenu a[data-nav-id='xfmgYourAlbums']:before {.m-faContent("@{fa-var-images}");}
.offCanvasMenu a[data-nav-id='xfmgWatchedContent']:before {.m-faContent("@{fa-var-eye}");}
.offCanvasMenu a[data-nav-id='xfmgWatchedMedia']:before {.m-faContent("@{fa-var-camera}");}
.offCanvasMenu a[data-nav-id='xfmgWatchedAlbums']:before {.m-faContent("@{fa-var-images}");}
.offCanvasMenu a[data-nav-id='xfmgWatchedCategories']:before {.m-faContent("@{fa-var-images}");}
.offCanvasMenu a[data-nav-id='xfmgSearchMedia']:before {.m-faContent("@{fa-var-search}");}
.offCanvasMenu a[data-nav-id='xfmgMarkViewed']:before {.m-faContent("@{fa-var-eye-slash}");}
/* XFRM Subnav */
.offCanvasMenu a[data-nav-id='xfrmLatestReviews']:before {.m-faContent("@{fa-var-balance-scale}");}
.offCanvasMenu a[data-nav-id='xfrmYourResources']:before {.m-faContent("@{fa-var-user}");}
.offCanvasMenu a[data-nav-id='xfrmWatched']:before {.m-faContent("@{fa-var-eye}");}
.offCanvasMenu a[data-nav-id='xfrmWatchedResources']:before {.m-faContent("@{fa-var-download}");}
.offCanvasMenu a[data-nav-id='xfrmWatchedCategories']:before {.m-faContent("@{fa-var-download}");}
.offCanvasMenu a[data-nav-id='xfrmSearchResources']:before {.m-faContent("@{fa-var-search}");}
/* Members Subnav */
.offCanvasMenu a[data-nav-id='registeredMembers']:before {.m-faContent("@{fa-var-users}");}
.offCanvasMenu a[data-nav-id='currentVisitors']:before {.m-faContent("@{fa-var-user-plus}");}
.offCanvasMenu a[data-nav-id='newProfilePosts']:before {.m-faContent("@{fa-var-pencil}");}
.offCanvasMenu a[data-nav-id='searchProfilePosts']:before {.m-faContent("@{fa-var-user-secret}");}
/* Uncategorised Subnav */
.offCanvasMenu a[data-nav-id='defaultNewsFeed']:before {.m-faContent("@{fa-var-rss}");}
.offCanvasMenu a[data-nav-id='defaultLatestActivity']:before {.m-faContent("@{fa-var-trophy}");}
.offCanvasMenu a[data-nav-id='defaultYourProfile']:before {.m-faContent("@{fa-var-user}");}
.offCanvasMenu a[data-nav-id='defaultYourAccount']:before {.m-faContent("@{fa-var-edit}");}
.offCanvasMenu a[data-nav-id='defaultRegister']:before {.m-faContent("@{fa-var-plus-square}");}
.offCanvasMenu a[data-nav-id='defaultLogOut']:before {.m-faContent("@{fa-var-sign-out-alt}");}
/* Navigation Menu Icons - Mobile - END */
     
    You must log in or register to reply here.
    Thread starter Similar threads Forum Replies Date
    ven0m xF2 Install Font Awesome 5.3.1 icons and use it on your forum Template modifications [2.x] 1
    ven0m xF2 Add Font Awesome animated icons to your user groups Template modifications [2.x] 0
    ven0m xF2 Add Font Awesome icons to the navigation Template modifications [2.x] 0
    ven0m xF2 Add Font Awesome icons in the user menu Template modifications [2.x] 0
    ven0m xF2 Add Font Awesome icons to the blocks of your sidebar Template modifications [2.x] 0
    ven0m xF2 Add Font Awesome icons to your usergroups Template modifications [2.x] 0
    ven0m xF2 Add Font Awesome icons to your prefix Template modifications [2.x] 0
    ven0m xF2 Font Awesome 5 integration Template modifications [2.x] 1
    ven0m xF2 [SC] Message Macros - Font Awesome Template modifications [2.x] 0
    ven0m xF2 [SC] Visitor Menu - Font Awesome Template modifications [2.x] 0
    ven0m xF2 [SC] Sidebar Block - Font Awesome Template modifications [2.x] 0
    ven0m xF2 [SC] Member View - Font Awesome Template modifications [2.x] 0
    ven0m xF2 [SC] Account Wrapper - Font Awesome Template modifications [2.x] 0
    ven0m xF2 XFMG media widget type icons Template modifications [2.x] 0
    ven0m xF2 Different Node Icons Per Node Template modifications [2.x] 0
    ven0m xF2 Double Click Forum Icons to Mark Forum as Read Template modifications [2.x] 0
    ven0m xF2 Add icons on your prefixes Template modifications [2.x] 0
    Similar threads
    Top Bottom