XenForo Custom Navigation Icons with Font Awesome 5 Pro

[Marks-Man]

Step 1 :

Simple and easy way to customize your XenForo Navigation ​

روشی آسان و زیبا برای آیکون بندی نوار پایینی جهت یابی

Step 2 :

Go to browser Inspect Element :

به آدرس فوق بروید

<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 کد فوق را می توانید در الگوی فوق بزارید

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"
}

Step 6 :

Before : قبل از انجام کار

After Result : بعد انجام کار

 

[Marks-Man]

@XenForo you can update it
Add icons

What's new

xnforo.ir

 

[XenForo]

Add icons

My good friend, thank you for your training and subscription

 

[Marks-Man]

My good friend, thank you for your training and subscription

You are welcome . you can fix the others same way . I will also update them in my theme and provide you codes but now should find a fix for members list.


add icons from
Cheatsheet | Font Awesome

Resources

xnforo.ir

Notable members

xnforo.ir

 

[XenForo]

you can fix the others same way

Yes, it should be fixed, my good friend, which unfortunately I did not have time for