Support Font Awesome Duotone icons for XenForo Header and navigation

Compatible XF Versions
2.3
N

nayem

Registered
CSS: 
/* Font Awesome duotone icons configuration */
.m-faDuotone(@url) {
  content: "";
  display: inline-block;
  background-color: currentColor;

  width: 1.25em;
  height: 1em;
  vertical-align: -0.125em;

  -webkit-mask: url(@url) no-repeat center;
  -webkit-mask-size: contain;
}

/* XenForo Navigation Menu */
.p-navEl-link,
.menu-linkRow,
.offCanvasMenu a {
  &:before {
    margin-right: 5px;
    display: inline-block;
    text-align: center;
  }

  /* Home */
  &[data-nav-id='home']:before { .m-faDuotone('styles/fa/duotone/home.svg'); }

  /* Forums */
  &[data-nav-id='forums']:before { .m-faDuotone('styles/fa/duotone/comments.svg'); }
  &[data-nav-id='newPosts']:before { .m-faDuotone('styles/fa/duotone/bolt.svg'); }
  &[data-nav-id='forumList']:before { .m-faDuotone('styles/fa/duotone/list.svg'); }
  &[data-nav-id='findThreads']:before { .m-faDuotone('styles/fa/duotone/comment-dots.svg'); }
  &[data-nav-id='yourThreads']:before { .m-faDuotone('styles/fa/duotone/user-circle.svg'); }
  &[data-nav-id='contributedThreads']:before { .m-faDuotone('styles/fa/duotone/comment-edit.svg'); }
  &[data-nav-id='unansweredThreads']:before { .m-faDuotone('styles/fa/duotone/question-circle.svg'); }
  &[data-nav-id='watched']:before { .m-faDuotone('styles/fa/duotone/eye.svg'); }
  &[data-nav-id='watchedThreads']:before { .m-faDuotone('styles/fa/duotone/comments-alt.svg'); }
  &[data-nav-id='watchedForums']:before { .m-faDuotone('styles/fa/duotone/folder-open.svg'); }
  &[data-nav-id='searchForums']:before { .m-faDuotone('styles/fa/duotone/search-plus.svg'); }
  &[data-nav-id='markForumsRead']:before { .m-faDuotone('styles/fa/duotone/check-square.svg'); }

  /* What's New */
  &[data-nav-id='whatsNew']:before { .m-faDuotone('styles/fa/duotone/bolt.svg'); }
  &[data-nav-id='featured']:before { .m-faDuotone('styles/fa/duotone/award.svg'); }
  &[data-nav-id='whatsNewPosts']:before { .m-faDuotone('styles/fa/duotone/copy.svg'); }
  &[data-nav-id='xfrmNewResources']:before { .m-faDuotone('styles/fa/duotone/upload.svg'); }
  &[data-nav-id='whatsNewProfilePosts']:before { .m-faDuotone('styles/fa/duotone/user-circle.svg'); }
  &[data-nav-id='whatsNewNewsFeed']:before { .m-faDuotone('styles/fa/duotone/rss.svg'); }
  &[data-nav-id='latestActivity']:before { .m-faDuotone('styles/fa/duotone/clock.svg'); }

  /* Resources (XFRM) */
  &[data-nav-id='xfrm']:before { .m-faDuotone('styles/fa/duotone/hdd.svg'); }
  &[data-nav-id='xfrmLatestReviews']:before { .m-faDuotone('styles/fa/duotone/star-half-alt.svg'); }
  &[data-nav-id='xfrmYourResources']:before { .m-faDuotone('styles/fa/duotone/user-circle.svg'); }
  &[data-nav-id='xfrmWatched']:before { .m-faDuotone('styles/fa/duotone/eye.svg'); }
  &[data-nav-id='xfrmWatchedResources']:before { .m-faDuotone('styles/fa/duotone/download.svg'); }
  &[data-nav-id='xfrmWatchedCategories']:before { .m-faDuotone('styles/fa/duotone/folder-open.svg'); }
  &[data-nav-id='xfrmSearchResources']:before { .m-faDuotone('styles/fa/duotone/search-plus.svg'); }

  /* Members */
  &[data-nav-id='members']:before { .m-faDuotone('styles/fa/duotone/users.svg'); }
  &[data-nav-id='registeredMembers']:before { .m-faDuotone('styles/fa/duotone/user.svg'); }
  &[data-nav-id='currentVisitors']:before { .m-faDuotone('styles/fa/duotone/globe.svg'); }
  &[data-nav-id='newProfilePosts']:before { .m-faDuotone('styles/fa/duotone/user-circle.svg'); }
  &[data-nav-id='searchProfilePosts']:before { .m-faDuotone('styles/fa/duotone/search-plus.svg'); }

  /* Default (no selected tab) */
  &[data-nav-id='defaultNewsFeed']:before { .m-faDuotone('styles/fa/duotone/rss.svg'); }
  &[data-nav-id='defaultLatestActivity']:before { .m-faDuotone('styles/fa/duotone/clock.svg'); }
  &[data-nav-id='searchConversations']:before { .m-faDuotone('styles/fa/duotone/envelope.svg'); }
  &[data-nav-id='defaultYourProfile']:before { .m-faDuotone('styles/fa/duotone/user-circle.svg'); }
  &[data-nav-id='defaultYourAccount']:before { .m-faDuotone('styles/fa/duotone/cog.svg'); }
  &[data-nav-id='defaultLogOut']:before { .m-faDuotone('styles/fa/duotone/sign-out.svg'); }
  &[data-nav-id='defaultRegister']:before { .m-faDuotone('styles/fa/duotone/user-plus.svg'); }

  /* Donate By ThemeHouse [Paid] */
  &[data-nav-id='th_donate']:before { .m-faDuotone('styles/fa/duotone/donate.svg'); }

  /* Ads Manager By Siropu [Paid] */
  &[data-nav-id='siropuAdsManager']:before { .m-faDuotone('styles/fa/duotone/bullhorn.svg'); }
  &[data-nav-id='siropuAdsManagerAds']:before { .m-faDuotone('styles/fa/duotone/user.svg'); }
  &[data-nav-id='siropuAdsManagerInvoices']:before { .m-faDuotone('styles/fa/duotone/receipt.svg'); }
  &[data-nav-id='siropuAdsManagerCreate']:before { .m-faDuotone('styles/fa/duotone/tag.svg'); }
  &[data-nav-id='siropuAdsManagerAdvertisers']:before { .m-faDuotone('styles/fa/duotone/list.svg'); }

} /* End of Navigation Font Awesome Icon */

/* XenForo Default Navigation Menu e.g, (Whatsnew, Search, Inbox, and Alerts Icons ) */
.p-navgroup-link.p-navgroup-link--whatsnew i:after {.m-faDuotone('styles/fa/duotone/bolt.svg');}
.p-navgroup-link.p-navgroup-link--search i:after {.m-faDuotone('styles/fa/duotone/search.svg');}
.p-navgroup-link.p-navgroup-link--conversations i:after {.m-faDuotone('styles/fa/duotone/envelope.svg');}
.p-navgroup-link.p-navgroup-link--alerts i:after {.m-faDuotone('styles/fa/duotone/bell.svg');}
/* End of XenForo Default Navigation Menu e.g, (Whatsnew, Search, Inbox, and Alerts Icons ) */
 
Sort by date Sort by votes
R

ryansmith53

Registered
Thanks for sharing the CSS. I'm just starting to learn about customizing XenForo. Let me ask: @url in .m-faDuotone(@url) is a variable that I defined somewhere in LESS, right? And the -webkit-mask here has the main function of displaying the SVG icon as a mask, right? poor bunny
 
Upvote 0 Downvote
N

nayem

Registered
ryansmith53 said:
Thanks for sharing the CSS. I'm just starting to learn about customizing XenForo. Let me ask: @url in .m-faDuotone(@url) is a variable that I defined somewhere in LESS, right? And the -webkit-mask here has the main function of displaying the SVG icon as a mask, right?
Click to expand...
You're right 🙂 — it uses XenForo's core styles/fa/ directory to locally load Font Awesome icons. These are applied using -webkit-mask and the @url variable. If you want to customize them further, such as changing colors, you can use CSS filters.
 
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom