XenForo Tutorials
xenForo 2.x.x Navtab menu FontAwesome use of
Submitted by zbimz, 01-01-2018, 06:31 PM, Thread ID: 67637
Thread Closed
xenForo 2.x.x Navtab menu FontAwesome use of
Demo;
Forums;
![[Image: GTaIpgq.png]](https://i.imgur.com/GTaIpgq.png)
What's New:
![[Image: zhBEtXG.png]](https://i.imgur.com/zhBEtXG.png)
Resources;
![[Image: d2nidzI.png]](https://i.imgur.com/d2nidzI.png)
Members;
![[Image: QY5WLPk.png]](https://i.imgur.com/QY5WLPk.png)
extra.less You just need to add the following codes to your template
Icons you want to add; http://fontawesome.io/icons/
content:"\f070" edit the code in red.
Demo;
Forums;
What's New:
Resources;
Members;
extra.less You just need to add the following codes to your template
Code:
.p-navEl [data-nav-id="home"]:before{font-family:FontAwesome;content:"\f015";padding-right:5px}
.p-navEl [data-nav-id="forums"]:before{font-family:FontAwesome;content:"\f27a";padding-right:5px}
.p-navEl [data-nav-id="whatsNew"]:before{font-family:FontAwesome;content:"\f128";padding-right:5px}
.p-navEl [data-nav-id="xfrm"]:before{font-family:FontAwesome;content:"\f019";padding-right:5px}
.p-navEl [data-nav-id="members"]:before{font-family:FontAwesome;content:"\f0c0";padding-right:5px}
.p-navEl [data-nav-id="newPosts"]:before{font-family:FontAwesome;content:"\f06d";padding-right:3px}
.p-navEl [data-nav-id="findThreads"]:before{font-family:FontAwesome;content:"\f00e";padding-right:3px}
.p-navEl [data-nav-id="watched"]:before{font-family:FontAwesome;content:"\f06e";padding-right:3px}
.p-navEl [data-nav-id="searchForums"]:before{font-family:FontAwesome;content:"\f002";padding-right:3px}
.p-navEl [data-nav-id="markForumsRead"]:before{font-family:FontAwesome;content:"\f070";padding-right:3px}
.p-navEl [data-nav-id="whatsNewPosts"]:before{font-family:FontAwesome;content:"\f0f6";padding-right:3px}
.p-navEl [data-nav-id="xfrmNewResources"]:before{font-family:FontAwesome;content:"\f019";padding-right:3px}
.p-navEl [data-nav-id="whatsNewProfilePosts"]:before{font-family:FontAwesome;content:"\f040";padding-right:3px}
.p-navEl [data-nav-id="whatsNewNewsFeed"]:before{font-family:FontAwesome;content:"\f09e";padding-right:3px}
.p-navEl [data-nav-id="latestActivity"]:before{font-family:FontAwesome;content:"\f005";padding-right:3px}
.p-navEl [data-nav-id="xfrmLatestReviews"]:before{font-family:FontAwesome;content:"\f091";padding-right:3px}
.p-navEl [data-nav-id="xfrmYourResources"]:before{font-family:FontAwesome;content:"\f0ed";padding-right:3px}
.p-navEl [data-nav-id="xfrmWatched"]:before{font-family:FontAwesome;content:"\f0a7";padding-right:3px}
.p-navEl [data-nav-id="xfrmSearchResources"]:before{font-family:FontAwesome;content:"\f002";padding-right:3px}
.p-navEl [data-nav-id="currentVisitors"]:before{font-family:FontAwesome;content:"\f234";padding-right:3px}
.p-navEl [data-nav-id="newProfilePosts"]:before{font-family:FontAwesome;content:"\f040";padding-right:3px}
.p-navEl [data-nav-id="searchProfilePosts"]:before{font-family:FontAwesome;content:"\f21b";padding-right:3px}Icons you want to add; http://fontawesome.io/icons/
content:"\f070" edit the code in red.
Users browsing this thread: 1 Guest(s)