XF 2.0 Replace FA node icon with an image?

Chris D

XenForo developer
Staff member
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
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!
 

cimad

Member
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

Well-known member
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
how to replace FA with image for specific node?
thank you
Rich (BB 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.
 

Max_69

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

Max_69

Member
Rich (BB 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
 

Dubbed Navigator

Active member
Rich (BB 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
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.
 

Max_69

Member
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.
 

cimad

Member
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.

Rich (BB 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);}
 

Max_69

Member
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.

Rich (BB 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 ;)
 

bobs409

Active member
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.

Rich (BB 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);}
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

Member
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
 

lshyrilser

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

How would I convert this XF 1 code:
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

Well-known member
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).
Thanks @Chris D but what about the icons in the sub forum drop down list:
1.jpg
 

Vilandra

Active member
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:

screenie2.gif

Anyone have any idea? Thanks :)
 
Top