XF 2.0 Replace FA node icon with an image?

[Member_68162]

How can I replace the FontAwesome node icons with an image for both read and unread forums?

 

[Chris D]

Something like this should work (added to the extra.less template):

.node-icon i { display: none; }
.node-icon { background-image: url('styles/default/xenforo/xenforo-favicon.png'); background-repeat: no-repeat; background-position: center; }
.node--read .node-icon { opacity: 0.5; }

It hides the icon (the i element) and adds a background image to the icon container. The above example just reduces the opacity of the image if the node is read (though you could also display a different image entirely).

 

[Member_68162]

Something like this should work (added to the extra.less template):

.node-icon i { display: none; }
.node-icon { background-image: url('styles/default/xenforo/xenforo-favicon.png'); background-repeat: no-repeat; background-position: center; }
.node--read .node-icon { opacity: 0.5; }

It hides the icon (the i element) and adds a background image to the icon container. The above example just reduces the opacity of the image if the node is read (though you could also display a different image entirely).

That's perfect. Thank you Chris!

 

[cimad]

I use this code on Extra.less

/* Forum read & unread icons */
.node--forum.node--read .node-icon i:before{content: url(./yourpath/node-read.png);}
.node--forum.node--unread .node-icon i:before{content: url(./yourpath/node-unread.png);}

/* Subforum read & unread icons */
.subNodeLink:before{content: url(./yourpath/subnode-read.png) !important;}
.subNodeLink.subNodeLink--unread:before{content: url(./yourpath/subnode-unread.png) !important;}

 

[maszd]

Something like this should work (added to the extra.less template):

.node-icon i { display: none; }
.node-icon { background-image: url('styles/default/xenforo/xenforo-favicon.png'); background-repeat: no-repeat; background-position: center; }
.node--read .node-icon { opacity: 0.5; }

It hides the icon (the i element) and adds a background image to the icon container. The above example just reduces the opacity of the image if the node is read (though you could also display a different image entirely).

Hi chris,
how to replace FA with image for specific node?
thank you

 

[DL6]

how to replace FA with image for specific node?
thank you

.node--id123 .node-icon i { display: none; }
.node--id123 .node-icon { background-image: url('styles/default/xenforo/xenforo-favicon.png'); background-repeat: no-repeat; background-position: center; }
.node--id123 .node--read .node-icon { opacity: 0.5; }

Change the numbers for the node ID.

 

[Max_69]

Hi, and for my personal icon read-unread? Example forum read 3.png, forum unread 3a.png.
Thanks

 

[Max_69]

.node--id123 .node-icon i { display: none; }
.node--id123 .node-icon { background-image: url('styles/default/xenforo/xenforo-favicon.png'); background-repeat: no-repeat; background-position: center; }
.node--id123 .node--read .node-icon { opacity: 0.5; }

Change the numbers for the node ID.

Hi, this code is correct? Opacity do not work.
Thanks

 

[Dubbed Navigator]

.node--id123 .node-icon i { display: none; }
.node--id123 .node-icon { background-image: url('styles/default/xenforo/xenforo-favicon.png'); background-repeat: no-repeat; background-position: center; }
.node--id123 .node--read .node-icon { opacity: 0.5; }

Change the numbers for the node ID.

Adding the node--id## resulted in it reverting back to standard icon any ideas why?

 

[Brad Padgett]

Hi, this code is correct? Opacity do not work.
Thanks

.node--id123 .node--read .node-icon { opacity: 0.5 !important; }

Try this. Sometimes you need to throw an !important flag on certain items that have been styled previously to overwrite existing properties on the item. If any time you encounter a style property that won't change always throw an !important flag on it first before you ask yourself why it doesn't work. If it still doesn't work after that then the code is somehow missing something.

Adding the node--id## resulted in it reverting back to standard icon any ideas why?

Not sure. You can try what I suggested above too and then if it still doesn't work it must be something else.

 

[Max_69]

.node--id123 .node--read .node-icon { opacity: 0.5 !important; }

Try this. Sometimes you need to throw an !important flag on certain items that have been styled previously to overwrite existing properties on the item. If any time you encounter a style property that won't change always throw an !important flag on it first before you ask yourself why it doesn't work. If it still doesn't work after that then the code is somehow missing something.

Thanks but do not work, the icon remains normal.

 

[cimad]

If you want to use a different icon for "read" and "unread" status, you can use the following code. You must change the ID number for which you want.

.node--forum.node--id1.node--read .node-icon i:before{content: url(./styles/default/xenforo/node-read.png);}

.node--forum.node--id1.node--unread .node-icon i:before{content: url(./styles/default/xenforo/node-unread.png);}

 

[Max_69]

If you want to use a different icon for "read" and "unread" status, you can use the following code. You must change the ID number for which you want.

.node--forum.node--id1.node--read .node-icon i:before{content: url(./styles/default/xenforo/node-read.png);}

.node--forum.node--id1.node--unread .node-icon i:before{content: url(./styles/default/xenforo/node-unread.png);}

Thanks so much, this code is perfect

 

[bobs409]

If you want to use a different icon for "read" and "unread" status, you can use the following code. You must change the ID number for which you want.

.node--forum.node--id1.node--read .node-icon i:before{content: url(./styles/default/xenforo/node-read.png);}

.node--forum.node--id1.node--unread .node-icon i:before{content: url(./styles/default/xenforo/node-unread.png);}

I'm looking to do this to using 2 images but I want it only for one forum style but not the others. Can that be done?

 

[cimad]

I'm looking to do this to using 2 images but I want it only for one forum style but not the others. Can that be done?

The extra.less template is individual for each style, so you only have to change the extra.less template of the style in which you want to apply it.

Reggards

 

[bobs409]

Thank you! That makes sense now.

 

[lshyrilser]

I'm using a single image with many icons on it, named "sprite.jpg".

How would I convert this XF 1 code:

.node .node_59 .forumNodeInfo.unread .nodeIcon,.node .node_59 .categoryForumNodeInfo.unread
.nodeIcon{background:url(/styles/default/xenforo/sprite.jpg) 0 -1035px}

to reflect on node 59 in XF2?

 

[ibaker]

Something like this should work (added to the extra.less template):

.node-icon i { display: none; }
.node-icon { background-image: url('styles/default/xenforo/xenforo-favicon.png'); background-repeat: no-repeat; background-position: center; }
.node--read .node-icon { opacity: 0.5; }

It hides the icon (the i element) and adds a background image to the icon container. The above example just reduces the opacity of the image if the node is read (though you could also display a different image entirely).

Thanks @Chris D but what about the icons in the sub forum drop down list:

 

[cimad]

Thanks @Chris D but what about the icons in the sub forum drop down list:
View attachment 170440

https://xenforo.com/community/threads/replace-fa-node-icon-with-an-image.135695/post-1186752

 

[Vilandra]

Can anyone help with putting a border around the custom image? Adding border: 1px solid #00000; to the
.node--idx .node-icon {} didn't work - it puts a border around the whole block like:



Anyone have any idea? Thanks