Xenforo How do I replace the Home icon on UI.X 2 with a font awesome Home Icon? (Xenforo 2)

Joined
Dec 12, 2017
Messages
43
Likes
23
Best answers
0
#1
I have asked this question on the Xenforo for and I submitted a trouble ticket to Theme House and it went unanswered. So my question is how do I replace the Home icon on UI.X 2 with a font awesome Home Icon?
 

TopSilver

web developer
Administrator
Joined
Mar 10, 2017
Messages
326
Likes
77
Best answers
0
#2
I'm assuming you changed the navigation bar phrase to say home? If so or if you wanted it to say forums, either way go to appearance > style properties > icons, and then find 'forums' in the list. Then use this cheat sheet to replace the unicode number in that box with the icon of your choice. For example, you see f002, f003.. etc.

https://cdn.materialdesignicons.com/2.0.46/

Just replace the 4 digit unicode in that box with the icon you want. If you change the phrase to say home instead of forums then you would still replace the one where it says 'forums' as that's the default home icon.
 
Likes: Soulwatcher
Joined
Dec 12, 2017
Messages
43
Likes
23
Best answers
0
#4
Is this right? its not showing up.
Code:
.p-navEl-link[data-nav-id="forums"]::before {!important;
font-family: FontAwesome;!important;
content: '\f086';!important;
}
 

TopSilver

web developer
Administrator
Joined
Mar 10, 2017
Messages
326
Likes
77
Best answers
0
#5
Add this to your extra.less file:


Code:
.p-navEl-link[data-nav-id="home"]::before {
font-family: FontAwesome;
content: '\f015';
}

If you need to add the !important flag do so like I should you before by putting it right before the semi colon but should work either way.

You could actually do the same thing for all your icons by replacing where it says "data-nav-id" with the appropriate nav ID and then adding the font awesome font family and unicode to extra.less like above. For most of your forum nav links you can get the icons to not display by going to what I said above and just taking out the icon code for the section.

And sorry it took me so long to respond. Just wasn't completely sure what you were asking but now I know!

EDIT: Working on the second part now.
 
Last edited:
Likes: Soulwatcher
Joined
Dec 12, 2017
Messages
43
Likes
23
Best answers
0
#6
Add this to your extra.less file:


Code:
.p-navEl-link[data-nav-id="home"]::before {
font-family: FontAwesome;
content: '\f015';
}
To get the material design icon to not appear also add this to extra.less

Code:
.p-navEl-link[data-nav-id="home"]::before .mdi {
display: none;
}
The first parts definitely correct. The second part should work but you'll need to play around with it. If you need to add the !important flag do so like I should you before by putting it right before the semi colon but should work either way.

You could actually do the same thing for all your icons by replacing where it says "data-nav-id" with the appropriate nav ID and then adding the font awesome font family and unicode to extra.less like above. For most of your forum nav links you can get the icons to not display by going to what I said above and just taking out the icon code for the section.

And sorry it took me so long to respond. Just wasn't completely sure what you were asking but now I know!

@Soulwatcher also yes I deleted my first post as it took me a moment to realize what you were asking.

EDIT: @Soulwatcher I had to just edit the second part I wasn't paying attention :p
Its still not working, and I added the important tags just like you said. I think the skin hates me lol.

Code:
.p-navEl-link[data-nav-id="home"]::before .mdi {
font-family: FontAwesome !important;
content: '\f015' !important;
}
P.S. I don't know anything about code. :confused:
 

TopSilver

web developer
Administrator
Joined
Mar 10, 2017
Messages
326
Likes
77
Best answers
0
#7
Its still not working, and I added the important tags just like you said. I think the skin hates me lol.

Code:
.p-navEl-link[data-nav-id="home"]::before .mdi {
font-family: FontAwesome !important;
content: '\f015' !important;
}
P.S. I don't know anything about code. :confused:
The first part is correct for getting it to display a font awesome icon. The second part was only a quick guess as I didn't have a chance to examine exactly how to get the .mdi class to not appear which is what material design icons are classed under. Give me a few moments and I'll update the thread.
 
Joined
Dec 12, 2017
Messages
43
Likes
23
Best answers
0
#8
The first part is correct for getting it to display a font awesome icon. The second part was only a quick guess as I didn't have a chance to examine exactly how to get the .mdi class to not appear which is what material design icons are classed under. Give me a few moments and I'll update the thread.
Ok thank you, your very helpful and I appreciate all your help and hopefully, someone on Google will be searching to do the same and you can get some website traffic off of this.
 
Likes: TopSilver

TopSilver

web developer
Administrator
Joined
Mar 10, 2017
Messages
326
Likes
77
Best answers
0
#9
Ok thank you, your very helpful and I appreciate all your help and hopefully, someone on Google will be searching to do the same and you can get some website traffic off of this.
Was the first code not working for you? I don't know what I was thinking to be honest. I just woke up a while ago lol. Wrote a response before having time to examine.

But, the first code will work for sure. What you need to do is go to the icon area like I told you and find "home" and then delete the icon code inside it.

Then use this in extra.less:

Code:
.p-navEl-link[data-nav-id="home"]::before {
font-family: FontAwesome !important;
content: '\f015' !important;
}
I provided the important part just in case it was needed.

If it didn't work the reason is because you never deleted the home icon from appearance > style properties > icons > box where it says 'home'.
 
Joined
Dec 12, 2017
Messages
43
Likes
23
Best answers
0
#10
Was the first code not working for you? I don't know what I was thinking to be honest. I just woke up a while ago lol. Wrote a response before having time to examine.

But, the first code will work for sure. What you need to do is go to the icon area like I told you and find "home" and then delete the icon code inside it.

Then use this in extra.less:

Code:
.p-navEl-link[data-nav-id="home"]::before {
font-family: FontAwesome !important;
content: '\f015' !important;
}
I provided the important part just in case it was needed.

If it didn't work the reason is because you never deleted the home icon from appearance > style properties > icons > box where it says 'home'.
It's gone and it's still not working there must be something else wrong.

Screenshot (79).png
 

TopSilver

web developer
Administrator
Joined
Mar 10, 2017
Messages
326
Likes
77
Best answers
0
#12
Ok, it's working now it was Cloudflare sorry. And thanks a million, your the best. :D
Glad it's working. Yeah be sure about that caching issue I told you about. Be sure to set the performance enhancements off. You'll save yourself a lot of fuss.