Marks-Man
Loyal Member
- Thread starter
- #1
Step 1 :
Step 2 :
Go to browser Inspect Element :
Step 3 :
Step 4 :
Step 5 :
Step 6 :


Simple and easy way to customize your XenForo Navigation
روشی آسان و زیبا برای آیکون بندی نوار پایینی جهت یابی
Step 2 :
Go to browser Inspect Element :
به آدرس فوق بروید
Code:
<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 :
Code:
.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
CSS:
.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 : بعد انجام کار
