How to replace FA icons with image icons in XF 2. Also how to add different images to each single node

TopSilver

web designer
Administrator
Joined
Mar 10, 2017
Messages
249
Likes
41
#1
Easy. First get your images. Upload them to your server somewhere. Either they can be different images for forum read/unread or you can use one single image and give it opacity.

After you have uploaded your single image or both images go to the template "extra.less".

Add this to extra.less, replacing the image link with the URL of where you put your image/images. It can be relative or you can use a direct path. I used relative in this example.

This is for giving a single image opacity:

Code:
.node-icon i {
display: none;
}
.node-icon {
background-image: url('styles/mystyle/path/to/image');
background-repeat: no-repeat;
background-position: center;
}

.node--read .node-icon {
opacity: 0.6;
}
If you want to use 2 images one for each read/unread. Then add the background image to ".node-read .node-icon" as well.

Now let's say you want to use a different image for each node and you wanted each node to have it's own image.

You could then do something like this. Replace the number in node id with the id of your node. Remember to replace the opacity with another background image if your using an image for both read and unread nodes.

Code:
 .node-icon i {
display: none;
}

.node--id123 .node-icon {
background-image: url('styles/mystyle/path/to/image')
background-repeat: no-repeat;
background-position: center;
}
.node--id123 .node--read .node-icon {
opacity: 0.6;
}
To find the ID of your node you simply click on the node and the number you see in the URL is the node ID. It's easy.

Keep in mind, you may need to throw an !important flag in for some of this. All an !important flag is, is a way to overwrite existing styling and have the new styling take over instead. If any of these don't work then do not forget to give that a try. You simply put !important right before the ending semicolon. So for example if opacity didn't work you would do this:

Code:
opacity: 0.6 !important;
It might not be needed but keep this in mind.

Thanks guys. Leave thoughts below.
 
Last edited: