XF 2.0 Using custom icons for node icons

[chaot3ch]

Hey everyone, was having trouble finding out how to do this yesterday but I figured it out and figured I would post it here in case anyone else was having issues.

// Removes the default icon
.node--forum .node-icon i:before{display: none;}

// Sets the new default unread icon of the forums
.node--unread .node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: -32px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
    background-repeat: no-repeat;
}
// Sets the new default read icon of the forums
.node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: 0px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
}

// Custome node icons for specific forums
// Replace the x after .node--id to correspond to the correct node ID you would like to make a custom icon for
.node--idx.node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: 0px -32px;
}
.node--idx.node--unread .node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: -32px -32px;
}

 

[nocte]

Yeah, the third and the forth quote in my post referred to @RebellionRoleplaying

Regarding the addon: I would use it if you plan to use font-awesome. If you have some experience in coding you could maybe change it to work with an image path, but I assume that's more than just changing a few lines of code.

 

[tourmeister]

Hey everyone, was having trouble finding out how to do this yesterday but I figured it out and figured I would post it here in case anyone else was having issues.

// Removes the default icon
.node--forum .node-icon i:before{display: none;}

// Sets the new default unread icon of the forums
.node--unread .node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: -32px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
    background-repeat: no-repeat;
}
// Sets the new default read icon of the forums
.node-icon i{
    background-image: url(/path/to/your/custom_node_sprite.png);
    background-position: 0px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
}

Is there a way to make this apply to the sub nodes as well?

In this screen in the admin cp, Appearance -> Style Properties -> Node/Forum List -> Sub Forums Display Style,

I have it set for "Listed Below Node"

So when I view the main Node list page, the sub nodes one level deep show up under the parent node. My custom icon appears for the parent nodes, but the sub nodes still show the default icon. If I enter the parent node, the sub nodes are listed and then they show my custom icon. Any second level sub nodes with a first level sub node still shows the default icon.

 

[Dermot]

See: https://xenforo.com/community/threads/customize-an-icon.156118/post-1298404

This also applies to sub node id's

EXTRA.less is just a CSS file that overwrite most CSS in a style letting you change many aspects.