XF 2.0 Customize an icon

Anyone knows how to change this icon to a customized one?
View attachment 187631

You can do his by editing your EXTRA.less file with something like this...

CSS:
/** forum node with id of say 11 **/
.node--forum.node--id11.node--read .node-icon i:before{content: url(./images/forumicons/unread_image.png);}
.node--forum.node--id11.node--unread .node-icon i:before{content: url(./images/forumicons/read_image.png);}
/** forum node with id of say 99 **/
.node--forum.node--id99.node--read .node-icon i:before{content: url(./images/forumicons/unread_image.png);}
.node--forum.node--id99.node--unread .node-icon i:before{content: url(./images/forumicons/read_image.png);}

unread_image.png and read_image.png can be whatever you want for that particular forum node and make sure you add them into ./images/forumicons/
 
He used this already. Doing it this way, you only have to add 1 image, not 2.

Code:
/**********/
.node .node-icon i { display: none; }
.node .node-icon {
background-image: url('/images/yourpic.png');
background-repeat: no-repeat;
background-position: center;   
}
.node--forum.node--read .node-icon {
background-image: url('/images/yourpic.png');
background-repeat: no-repeat;
background-position: center;
opacity: 0.4;
}
/**********/
 
@Jordyn
What will be the code if I want to add exactly like what you said, but I also want to add different icons only for 2 forums. I tried messing up with this but whatever I do it always ends badly.

the code i posted above is for individual forum nodes, change the node number to whatever node you want to change.

CSS:
/** forum node with id of say 11 **/
.node--forum.node--id11.node--read .node-icon i:before{content: url(./images/forumicons/unread_image.png);}
.node--forum.node--id11.node--unread .node-icon i:before{content: url(./images/forumicons/read_image.png);}
/** forum node with id of say 99 **/
.node--forum.node--id99.node--read .node-icon i:before{content: url(./images/forumicons/unread_image.png);}
.node--forum.node--id99.node--unread .node-icon i:before{content: url(./images/forumicons/read_image.png);}
 
What if I use sprite? I tried to adjust the positions but they always end up weird.

the code i posted above is for individual forum nodes, change the node number to whatever node you want to change.

CSS:
/** forum node with id of say 11 **/
.node--forum.node--id11.node--read .node-icon i:before{content: url(./images/forumicons/unread_image.png);}
.node--forum.node--id11.node--unread .node-icon i:before{content: url(./images/forumicons/read_image.png);}
/** forum node with id of say 99 **/
.node--forum.node--id99.node--read .node-icon i:before{content: url(./images/forumicons/unread_image.png);}
.node--forum.node--id99.node--unread .node-icon i:before{content: url(./images/forumicons/read_image.png);}
 
I would imagine you would have to set the position of the image you want to show from the sprite after the url parameter like i added below, didn't test it though

EG: adding the 0,-50

CSS:
/** forum node with id of say 11 **/
.node--forum.node--id11.node--read .node-icon i:before{content: url(./images/forumicons/unread_image.png) 0,0;}
.node--forum.node--id11.node--unread .node-icon i:before{content: url(./images/forumicons/read_image.png) 0,-50;}
/** forum node with id of say 99 **/
.node--forum.node--id99.node--read .node-icon i:before{content: url(./images/forumicons/unread_image.png) 0,0;}
.node--forum.node--id99.node--unread .node-icon i:before{content: url(./images/forumicons/read_image.png) 0,-50;}
 
What if I use sprite? I tried to adjust the positions but they always end up weird.

Okay, actually tried it myself and content doesn't allow positioning of background so sprites would not work, you would have to do something like the following, using the following sprite gif as reference.

img_navsprites_hover.gif


CSS:
/** forum node with id of say 2 **/

.node--forum.node--id2.node--read .node-icon i:before{
background: url('https://www.w3schools.com/css/img_navsprites_hover.gif') no-repeat 0px 0px;
    width:43px;
    height:43px;
    display:block;
    position:absolute;
    content: " ";
    top:20px;
    left:10px;
}
.node--forum.node--id2.node--unread .node-icon i:before{
    background: url('https://www.w3schools.com/css/img_navsprites_hover.gif') no-repeat -91px 0px;
    width:43px;
    height:43px;
    display:block;
    position:absolute;
    content: " ";
    top:20px;
    left: 10px;
}

read node been the home icon and unread as right arrow..
 
@Jordyn
What will be the code if I want to add exactly like what you said, but I also want to add different icons only for 2 forums. I tried messing up with this but whatever I do it always ends badly.
You can just use both codes mate.
First code add in extra.less, add your image for all forums first.
Code:
/* Node All Forums */
.node .node-icon i { display: none; }
.node .node-icon {
background-image: url('/images/yourpic.png');
background-repeat: no-repeat;
background-position: center;  
}
.node--forum.node--read .node-icon {
background-image: url('/images/yourpic.png');
background-repeat: no-repeat;
background-position: center;
opacity: 0.4;
}
/* Node All Forums End */



In this code, add to extra.less, replace the numbers 4/5 with your 2 forum ID's and add your images.
Code:
/* Node icons */
.node--id4 .node-icon i { display: none; }
.node--id4 .node-icon {
background-image: url('/images/yourimage.png');
background-repeat: no-repeat;
background-position: center;  
}
.node--forum.node--id4.node--read .node-icon {
background-image: url('/images/yourimage.png');
background-repeat: no-repeat;
background-position: center;
opacity: 0.4;
}
/* Node icons End */

/* Node icons */
.node--id5 .node-icon i { display: none; }
.node--id5 .node-icon {
background-image: url('/images/yourimage.png');
background-repeat: no-repeat;
background-position: center;  
}
.node--forum.node--id5.node--read .node-icon {
background-image: url('/images/yourimage.png');
background-repeat: no-repeat;
background-position: center;
opacity: 0.4;
}
/* Node icons End */
 
I manage to setup the default icon and it is in position but with both of the codes you provided for specific node icon the icon is always out of position, it's like it doesn't follow the css of the default icon. I am using this css for the default icon because I decided to have only 1 icon, not 2 for read and unread.

Code:
.node-icon i{
    background-image: url(images/iconsprites.png);
    background-position: 0px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
}
 
I manage to setup the default icon and it is in position but with both of the codes you provided for specific node icon the icon is always out of position, it's like it doesn't follow the css of the default icon. I am using this css for the default icon because I decided to have only 1 icon, not 2 for read and unread.

Code:
.node-icon i{
    background-image: url(images/iconsprites.png);
    background-position: 0px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
}
You would just use this code without the opacity: 0.4; and add your 1 image to both mate.
Code:
/* Node All Forums */
.node .node-icon i { display: none; }
.node .node-icon {
background-image: url('/images/yourpic.png');
background-repeat: no-repeat;
background-position: center; 
}
.node--forum.node--read .node-icon {
background-image: url('/images/yourpic.png');
background-repeat: no-repeat;
background-position: center;
}
/* Node All Forums End */
 
I manage to setup the default icon and it is in position but with both of the codes you provided for specific node icon the icon is always out of position, it's like it doesn't follow the css of the default icon. I am using this css for the default icon because I decided to have only 1 icon, not 2 for read and unread.

Code:
.node-icon i{
    background-image: url(images/iconsprites.png);
    background-position: 0px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
}

you would have to position the icon with the CSS using absolute positioning or relative positioning then use the background position to align sprite, if you're using a sprite, which i think you are? Jordyn keeps giving you a single image result though so i'm not sure.

CSS:
.node .node-icon i:before { content: " "; }

.node--forum.node--id2.node--read .node-icon i{
    background: url('https://www.w3schools.com/css/img_navsprites_hover.gif') no-repeat 0px 0px;
    position: relative;
    left: -5px;
    display: table-cell;
    vertical-align: middle;
    padding: 8px 14px 0px 0px;
    opacity: 0.4;
}
.node--forum.node--id2.node--unread .node-icon i{
    background: url('https://www.w3schools.com/css/img_navsprites_hover.gif') no-repeat -91px 0px;
    position: relative;
    left: -5px;
    display: table-cell;
    vertical-align: middle;
    padding: 8px 14px 0px 0px;
}

Obviously these values will differ on whatever theme you're using and you will need to tweak it, same way you will have to tweak the position of the sprites, as it depends on what sprite and how many icons are in the single sprite.

if you give me the sprite url and your site url i could check it for you.
 
Top Bottom