XF 2.3 Insert an image for a Category on the home page?

[tomwood]

Hello,

I want to insert an image to the left of specific Categories listed on the home page. In the image below, I want to either replace the dialogue bubbles with an image (the blue rectangle) or place an image between the bubbles and the listing text - the red rectangle. There will be several more Categories like this under The Hopepunks Series Category, and each needs a different image. So, I don't want a site-wide image here.

Note that I'm using the OzzModz forum index tweak add-on to reduce what is shown toward the right.



GeminiAI made several attempts at adding some CSS to EXTRA.LESS, but it never worked and ended up throwing server issues as it got more desperate. Here's an intermediate version:

/* Add a small icon next to a specific category title */
.block.block--category.block--category12 .block-header a::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
    background-image: url('styles/default/xenforo/your-icon.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

I replaced category12 with the correct node number and changed the image path to the correct image.

And, is it normal that that Category shows dialogue bubbles at all? It's clearly a Category in the node list in the admin dashboard.

Would appreciate a little help.

Thanks!

ETA: clarity

 

[Mr Lucky]

This is how I did it

.node.node--id264
{
    .node-icon i

{
    display: none;
}
    &.node--category
    {
           .node-icon
        {
            background-image: url('https://example.com/styles/default/xenforo/your-icon.png');
            width:24px!important;
            height:24px!important;
            background-repeat: no-repeat;
            background-position: top;
            background-size: contain;
 
        }
   
    }
}

 

[tomwood]

That works!

Thanks!