• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 2.0 Replace FA node icon with an image?

Chris D

XenForo developer
Staff member
#2
Something like this should work (added to the extra.less template):
Less:
.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).
 

PaulK

Active member
#3
Something like this should work (added to the extra.less template):
Less:
.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!
 
#4
I use this code on Extra.less

CSS:
/* 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

Active member
#5
Something like this should work (added to the extra.less template):
Less:
.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

Well-known member
#6
how to replace FA with image for specific node?
thank you
Code:
.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.
 
#8
Code:
.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
 
#9
Code:
.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

Well-known member
#10
Hi, this code is correct? Opacity do not work.
Thanks
Code:
.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.
 
#11
Code:
.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.
 
#12
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.

Code:
.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);}
 
#13
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.

Code:
.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 ;)