XenForo Custom Navigation Icons with Font Awesome 5 Pro

[CR LEAKS]

Step 1 :

Simple and easy way to customize your XenForo Navigation

An easy and beautiful way to iconize the bottom navigation bar

Step 2 :

Go to browser Inspect Element :

Use it on your mobile phone

<a href="/whats-new/posts/" class="p-navEl-link " rel="nofollow" data-xf-key="alt+1" data-nav-id="whatsNewPosts">New posts</a>

Step 3 :

• Example : Navigation ID is >>>>>>>> whatsNewPosts
• Go to theme templates extra-less.css and add the following code

extra.less Click on the button to turn on the button.

Step 4 :

.p-navEl a[data-nav-id="whatsNewPosts"]::before{
font-family: 'Font Awesome 5 Pro';
content:"\f005"
}

Step 5 :

In my case I added all of them

.p-navEl a[data-nav-id="whatsNewPosts"]::before{
font-family: 'Font Awesome 5 Pro';
content:"\f005"
}
.p-navEl a[data-nav-id="xfrmNewResources"]::before{
font-family: 'Font Awesome 5 Pro';

content:"\f849"

}
.p-navEl a[data-nav-id="whatsNewProfilePosts"]::before{
font-family: 'Font Awesome 5 Pro';
content:"\f78a"
}
.p-navEl a[data-nav-id="whatsNewNewsFeed"]::before{
font-family: 'Font Awesome 5 Pro';
content:"\f1ea"
}
.p-navEl a[data-nav-id="latestActivity"]::before{
font-family: 'Font Awesome 5 Pro';
content:"\f5da"
}