Member_68162
Active member
How can I replace the FontAwesome node icons with an image for both read and unread forums?
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; }
That's perfect. Thank you Chris!Something like this should work (added to theextra.less
template):
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).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; }
/* 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;}
Hi chris,Something like this should work (added to theextra.less
template):
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).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; }
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; }
Hi, this code is correct? Opacity do not work.Change the numbers for the node ID.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.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; }
Hi, this code is correct? Opacity do not work.
Thanks
.node--id123 .node--read .node-icon { opacity: 0.5 !important; }
Adding the node--id## resulted in it reverting back to standard icon any ideas why?
Thanks but do not work, the icon remains normal.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.
.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 perfectIf 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);}
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?
.node .node_59 .forumNodeInfo.unread .nodeIcon,.node .node_59 .categoryForumNodeInfo.unread
.nodeIcon{background:url(/styles/default/xenforo/sprite.jpg) 0 -1035px}
Thanks @Chris D but what about the icons in the sub forum drop down list:Something like this should work (added to theextra.less
template):
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).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; }
We use essential cookies to make this site work, and optional cookies to enhance your experience.