XenForo Custom Navigation Icons with Font Awesome 5 Pro

Marks-Man

Marks-Man

Loyal Member
Capture (1).PNG


CSS: 
.p-navEl a[data-nav-id="xfrmLatestReviews"]::before{

content:"\f06e"

}



.p-navEl a[data-nav-id="xfrmYourResources"]::before{

content:"\f120"

}



.p-navEl a[data-nav-id="xfrmWatched"]::before{

content:"\f2e1"

}



.p-navEl a[data-nav-id="xfrmSearchResources"]::before{

content:"\f865"

}





.p-navEl a[data-nav-id="registeredMembers"]::before{

content:"\f0ca"

}





.p-navEl a[data-nav-id="currentVisitors"]::before{

content:"\f0f0"

}



.p-navEl a[data-nav-id="newProfilePosts"]::before{

content:"\f10d"

}

.p-navEl a[data-nav-id="searchProfilePosts"]::before{

content:"\f4d8"

}



.menu-content a[data-nav-id="registeredMembers"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f0ca"

}





.menu-content a[data-nav-id="currentVisitors"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f0f0"

}



.menu-content a[data-nav-id="newProfilePosts"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f10d"

}

.menu-content a[data-nav-id="searchProfilePosts"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f4d8"

}





.menu-content a[data-nav-id="newPosts"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f005"

}



.menu-content a[data-nav-id="findThreads"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f00e"

}



.menu-content a[data-nav-id="yourThreads"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f1ea"

}

.menu-content a[data-nav-id="contributedThreads"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f44a"

}

.menu-content a[data-nav-id="unansweredThreads"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f070"

}

.menu-content a[data-nav-id="watched"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f6db"

}

.menu-content a[data-nav-id="watchedThreads"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f6db"

}

.menu-content a[data-nav-id="watchedForums"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f6db"

}



.menu-content a[data-nav-id="searchForums"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f865"

}



.menu-content a[data-nav-id="markForumsRead"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f06e"

}





.menu-content a[data-nav-id="xfrmLatestReviews"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f587"

}



.menu-content a[data-nav-id="xfrmYourResources"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f25a"

}



.menu-content a[data-nav-id="xfrmWatched"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f6db"

}

.menu-content a[data-nav-id="xfrmWatchedResources"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f6db"

}

.menu-content a[data-nav-id="xfrmWatchedCategories"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f6db"

}

.menu-content a[data-nav-id="watched"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f6db"

}

.menu-content a[data-nav-id="xfrmSearchResources"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f002"

}





.menu-content a[data-nav-id="whatsNewPosts"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f005"

}



.menu-content a[data-nav-id="xfrmNewResources"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f849"

}



.menu-content a[data-nav-id="whatsNewProfilePosts"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f78a"

}





.menu-content a[data-nav-id="whatsNewNewsFeed"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f1ea"

}





.menu-content a[data-nav-id="latestActivity"]::before{

font-family: 'Font Awesome 5 Pro';

padding-right: 5px;

float: left;

-webkit-transition: opacity .25s ease, background .25s ease;

transition: opacity .25s ease, background .25s ease;

content:"\f5da"

}
 
You must log in or register to reply here.
  • Tags
    custom navigation
    • Back
    Top Bottom