XF 2.3 Replacing node icons via css

[JoyFreak]

In 2.2 you could simply do this with a css hack:

.node.node--id(node_id) .node-icon i:before {
    content: "\f019";
}

But now I see 2.3 uses svg. How does one replace the node icon using css with svg's?

 

[Jeremy P]

You should use the mixin/LESS variables (in XF 2.2 too):

.node.node--id(node_id) .node-icon i
{
    &::before
    {
        .m-faContent(@fa-var-download, 1em);
    }

    svg
    {
        display: none;
    }
}

 

[BassMan]

[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]

 

[cjwinternet]

You should use the mixin/LESS variables (in XF 2.2 too):

.node.node--id(node_id) .node-icon i:before {
    .m-faContent(@fa-var-download);
}

That adds an icon, but the original SVG is still there....

 

[cjwinternet]

In 2.2 you could simply do this with a css hack:

.node.node--id(node_id) .node-icon i:before {
    content: "\f019";
}

But now I see 2.3 uses svg. How does one replace the node icon using css with svg's?

Did you get this to work?

 

[Russ]

You should use the mixin/LESS variables (in XF 2.2 too):

.node.node--id(node_id) .node-icon i:before {
    .m-faContent(@fa-var-download);
}

This does indeed load a second icon. This CSS only approach seems to work:

.node .node-icon i
{
    &:before 
    {
        .m-faContent(@fa-var-upload);
        width: 100%;
    }
    svg
    {
        display: none;
    }
}

But it's essentially hiding the default SVG icon. Would you recommend a better approach (CSS only)?

 

[JoyFreak]

You should use the mixin/LESS variables (in XF 2.2 too):

.node.node--id(node_id) .node-icon i:before {
    .m-faContent(@fa-var-download);
}

This worked for me. Why aren’t you using this instead?

Edit: from your post above it seems you are using that. I don’t know what I did. I think I must have hidden the svg as russ suggested above. I can’t really check right now as on mobile. Can confirm later.

 

[Russ]

This worked for me. Why aren’t you using this instead?

Edit: from your post above it seems you are using that. I don’t know what I did. I think I must have hidden the svg as russ suggested above. I can’t really check right now as on mobile. Can confirm later.

2.3 Beta 5 that code on a completely stock default style:



No add-ons installed.

 

[BassMan]

This is working for me on XF 2.3 Beta 5:

l

.node.node--idX {
    &.node--forum {

        .node-icon i {
            .m-faContent(@fa-var-dot-circle);
        }
        &.node--read .node-icon i {
            opacity: 0.4;
        }
    }
}

[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]

 

[cjwinternet]

This is working for me on XF 2.3 Beta 5:

l

.node.node--idX {
    &.node--forum {

        .node-icon i {
            .m-faContent(@fa-var-dot-circle);
        }
        &.node--read .node-icon i {
            opacity: 0.4;
        }
    }
}

[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]

Kind of works, but the icons aren't aligned or sized correctly....

 

[Jeremy P]

But it's essentially hiding the default SVG icon. Would you recommend a better approach (CSS only)?

Apologies, I forgot node icons were inlined for 2.3. For a CSS-only approach, I think hiding the SVG is about as good as it gets. I've edited my original post.

 

[BassMan]

Kind of works, but the icons aren't aligned or sized correctly....

View attachment 301770

Then you can use this code, to adjust padding:

.node.node--idX {
    &.node--forum {

        .node-icon  {
            padding-left: 5px;
            
            i {
                .m-faContent(@fa-var-dot-circle);
            }
        }
        
        &.node--read .node-icon i {
            opacity: 0.4;
        }
    }
}

 

[Jeremy P]

You can set the width as a second argument to .m-faContent. I've updated my original post to reflect the approach I'd recommend for 2.3.

 

[Russ]

This is working for me on XF 2.3 Beta 5:

l

.node.node--idX {
    &.node--forum {

        .node-icon i {
            .m-faContent(@fa-var-dot-circle);
        }
        &.node--read .node-icon i {
            opacity: 0.4;
        }
    }
}

[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]

I don't see how this works on 2.3. I think you'll need to update the resource with hiding the SVG icon as well @BassMan

 

[BassMan]

I don't see how this works on 2.3. I think you'll need to update the resource with hiding the SVG icon as well @BassMan

I did, thank you. But for some reason it was working before too.

 

[Wanji]

Can this be implemented with 'Listed below node'

 

[Wanji]

Can this be implemented with 'Listed below node'

Any idea? I mean child node.

 

[cjwinternet]

Why are we even doing this? 2.3 ships with 7870 Font Awesome SVGs.
\xenforo_2.3.0-Beta-6-Unstable_28DaysLater_2388B35DCE_upgrade\upload\styles\fa\regular alone has 1853 SVG files.

I simply want to be able to select one of these per node.

 

[JoyFreak]

Why are we even doing this? 2.3 ships with 7870 Font Awesome SVGs.
\xenforo_2.3.0-Beta-6-Unstable_28DaysLater_2388B35DCE_upgrade\upload\styles\fa\regular alone has 1853 SVG files.

I simply want to be able to select one of these per node.

Yeah, how do you use those svgs instead via css ?

 

[cjwinternet]

Yeah, how do you use those svgs instead via css ?

Why even with CSS? It should be selectable in the node config.