How to replace default image icons with Font Awesome icons in your Xenforo 2 Nodes

TopSilver

web designer
Administrator
Joined
Mar 10, 2017
Messages
249
Likes
41
#1
This tutorial is for adding Font Awesome icons to your Xenforo 2 nodes.

Xenforo 2 has Font Awesome built in but for adding the icons with CSS we still need to reference the font family.

This is how you do it.
Code:
.node-icon img {
display: none;
}

.node-icon:before { 
font-family: FontAwesome;
content: '\f0c2';
 }

.node--read .node-icon:before { 
font-family: FontAwesome;
content: '\f0c2';
 }
Okay notice that there's no space between Font and Awesome in the font family. If you put a space between it, then it won't work. That caught me off guard before so keep that in mind. To put a specific icon, replace f0c2 with your desired icon. You can view all the icons here:

http://fontawesome.io/icons/

Click on the desired icon to find out it's unicode number. Or you can use the cheatsheet located here:

http://fontawesome.io/cheatsheet/

If you use the cheatsheet simply only copy the last 4 characters not counting the semicolon for the appropriate unicode. It's the same difference.

Keep in mind if it doesn't work off hand to throw an !important flag into it. All an important flag is, is a way to overwrite existing styling. When using platforms like Xenforo sometimes it's needed. In this example you probably won't need it so you more than likely don't need to worry about this but it may be needed for some of you.

You simply add !important before the semicolon for example.

Code:
display: none !important;
That's just an example. Sometimes it's needed. But you should be okay without it in this example.

Good luck guys and let me know if I can ever help.