XF 2.3 How to remove default icons in xf 2.3

[Hristo Avramov]

I used this code in extra.less to remove the default icons.

.node--forum .node-icon i:before{display: none;}

Now in my local test this does not remove anymore the icons. Suggest me how to remove it again.

best regards

 

[Mr Lucky]

Try

.node-icon
{display:none}

 

[Hristo Avramov]

Try

.node-icon
{display:none}

Now it hides both the default icons and my new icons.

 

[Mr Lucky]

Now it hides both the default icons and my new icons.

Oh, you didn't mention anything about your new icons.

 

[Hristo Avramov]

Oh, you didn't mention anything about your new icons.

I removed the default and put new ones, the above code was working until 2.2, after this now both the default icons and my new icons appear in the same place.

 

[Jeremy P]

The approach will be a bit different for 2.3. There is a resource which details how to accomplish this:

[cXF] Change default FA node icon

Nov 9, 2019

DIY tutorial to change default Font Awesome node icons

• BassMan
• bassman customizexf.com cxf font awesome icon node
• XenForo tips & guides [2.x]

 

[Hristo Avramov]

The approach will be a bit different for 2.3. There is a resource which details how to accomplish this:

[cXF] Change default FA node icon

Nov 9, 2019

DIY tutorial to change default Font Awesome node icons

• BassMan
• bassman customizexf.com cxf font awesome icon node
• XenForo tips & guides [2.x]

Thank you.

To remove the default icons the code is:

    svg {
        display: none;
    }

 

[James]

Thank you.

To remove the default icons the code is:

    svg {
        display: none;
    }

You may wish to reassess this. Consider more specificity.

You are essentially hiding ALL svg tags. This will hide any svg images.

 

[Hristo Avramov]

You may wish to reassess this. Consider more specificity.

You are essentially hiding ALL svg tags. This will hide any svg images.

How can I make it only for the icons?

How about like this? Am I hiding all svg tags or only the icons?

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

 

[James]

How can I make it only for the icons?

If you used the code from the tutorial thread in its entirely you should be OK (it has a conditional to only do it for node icons) - if not you need to use the full code or specify further.

.node-icon svg {

 

[James]

How can I make it only for the icons?

How about like this? Am I hiding all svg tags or only the icons?

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

This should be OK as you have nested the css Inside the node-icon. You may need to remove the i after the node-icon.