Need some help with node icons

[Al]

I was able to change the icons used on the main nodes on my forum by adding some additional code to extra.less

Looks good, right?

The issue I have is that I cannot work out how to change the sub-node icons to be the same. This is the code I used in extra.less

.node-icon i { display: none; }
.node-icon { background-image: url('styles/omni/xenforo/unreadnode.png'); background-repeat: no-repeat; background-position: center; }
.node--read .node-icon { opacity: 0.5; }

.node-icon-fix i { display: none; }
.node-icon-fix { background-image: url('styles/omni/xenforo/subnode.png'); background-repeat: no-repeat; background-position: center; }
.node--read .node-icon-fix { opacity: 0.5; }

I'm aware of the !important tag which can be added, but when I try to insert it it resets the main nodes too.

Can someone help please?

 

[Al]

Have you thought of using one of my maintained free add-ons ?

https://xenforo.com/community/resources/cv6-node-icons-tools.5565/

Sorry I have just seen this! I'll check it out.

 

[Al]

First thing that comes to mind.... And I am sure you have done this and it may not be relevant (depending on your usage).... Have you cleared your browser cache if they are not inlined?

Note:
Based on @Cedric reply it appears they are not inlined. So, have you cleared your cache then reloaded the page?

Aye and tried chrome incognito mode too.

 

[Tyrsson]

Aye and tried chrome incognito mode too.

Try it in a different browser. This issue with Chrome cache is the exact reason I do not use it for development.

 

[Al]

I use Opera usually. I’ve tried it in Opera, Chrome, Edge, Firefox.

 

[Al]

“A wild @Russ has entered the server.”

 

[Mike30]

I was able to change it with this css code:

.fa--xf.fal.fa-comments.subNodeLink-icon{
color:transparent;
font-size:15px;
}
.fa-comments:before {
  background-image: url("https://shatteredsunrts.com/data/avatars/s/0/1.jpg?1690990421");
background-repeat: no-repeat;
    background-size: cover;
    text-align: center;

}

change the background-image and font-size to your convenience
Let me know if this fixed the issue

 

[Russ]

“A wild @Russ has entered the server.”

I might change your CSS to something like this:

.block-body
{
    .node--unread .node-body .node-icon i
    {
        background-position: right center;
    }
    .node-icon
    {
        padding-right: 10px;
        width: 60px;
        i
        {
            background: url("styles/omni/xenforo/unreadnode.png") no-repeat left center;
            width: 45px;
            height: 45px;
            background-size: 45px auto;
            &:before
            {
                opacity: 0 !important;
            }
        }
    }
}
.subNodeLink 
{
    padding: 2px 0;
    display: inline-flex;
    align-items: center;
    i
    {
        display: none !important;    
    }
    &:before
    {
        content: "";
        background: url("styles/omni/xenforo/unreadnode.png") no-repeat left center;
        width: 18px;
        height: 18px;
        background-size: 18px auto;
        opacity: 0.5;
        color: rgba(0, 0, 0, 0);
    }
    &.subNodeLink--unread i
    {
        opacity: 1;
    }
}

It'll reduce the size of the icon a little bit as well which you can change the 45px values, I just think it looks nicer being a tiny bit smaller.

 

[Al]

You're all legendary. Thank you both so much. It look s perfect now.

 

[Al]

This is now resolved.