In 2.2 you could simply do this with a css hack:
Code:.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?
You should use the mixin/LESS variables (in XF 2.2 too):
Less:.node.node--id(node_id) .node-icon i:before { .m-faContent(@fa-var-download); }
.node .node-icon i
{
&:before
{
.m-faContent(@fa-var-upload);
width: 100%;
}
svg
{
display: none;
}
}
This worked for me. Why aren’t you using this instead?You should use the mixin/LESS variables (in XF 2.2 too):
Less:.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.
.node.node--idX {
&.node--forum {
.node-icon i {
.m-faContent(@fa-var-dot-circle);
}
&.node--read .node-icon i {
opacity: 0.4;
}
}
}
This is working for me on XF 2.3 Beta 5:
l
Less:.node.node--idX { &.node--forum { .node-icon i { .m-faContent(@fa-var-dot-circle); } &.node--read .node-icon i { opacity: 0.4; } } }
DIY tutorial to change default Font Awesome node icons
- BassMan
- bassman customizexf.com cxf font awesome icon node
- XenForo tips & guides [2.x]
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.But it's essentially hiding the default SVG icon. Would you recommend a better approach (CSS only)?
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;
}
}
}
This is working for me on XF 2.3 Beta 5:
l
Less:.node.node--idX { &.node--forum { .node-icon i { .m-faContent(@fa-var-dot-circle); } &.node--read .node-icon i { opacity: 0.4; } } }
DIY tutorial to change default Font Awesome node icons
- BassMan
- bassman customizexf.com cxf font awesome icon node
- XenForo tips & guides [2.x]
We use essential cookies to make this site work, and optional cookies to enhance your experience.