XenForo Tutorials

xenForo 2.x.x Navtab menu FontAwesome use of

Submitted by zbimz, , Thread ID: 67637

Thread Closed
zbimz
Newbie
Prime
Level:
0
Reputation:
0
Posts:
19
Likes:
12
Credits:
178
01-01-2018, 06:31 PM
#1
xenForo 2.x.x Navtab menu FontAwesome use of

Demo;

Forums;
[Image: GTaIpgq.png]

What's New:
[Image: zhBEtXG.png]

Resources;
[Image: d2nidzI.png]

Members;
[Image: QY5WLPk.png]


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)