[cXF] Change default FA node icon

[BassMan]

You can try with an image instead of FA:

[cXF] Node icons with image

Nov 9, 2019

DIY tutorial to change default FA node icons with image

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

 

[Deepblue]

How to change sub-node icon in forum homepage with png images as read and unread?

 

[BassMan]

How to change sub-node icon in forum homepage with png images as read and unread?

I can check that first thing tomorrow. I'm on my mobile right now.

 

[Deepblue]

I can check that first thing tomorrow. I'm on my mobile right now.

Still waiting.

 

[BassMan]

How to change sub-node icon in forum homepage with png images as read and unread?

What XF version?

 

[Deepblue]

What XF version?

2.3

 

[BassMan]

Check here: https://xenforo.com/community/threads/cxf-node-icons-with-image.172080/page-3#post-1693695

 

[frm]

Any way to change the sub-node icon in a dropdown menu on the default style?

 

[Deleted member 184953]

Any way to change the sub-node icon in a dropdown menu on the default style?

Look at this resource, you can probably adapt the code (colour to node).

[cXF] Coloured Node Icons

Mar 12, 2018

... DIY tutorial

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

 

[frm]

Look at this resource, you can probably adapt the code (colour to node).

[cXF] Coloured Node Icons

Mar 12, 2018

... DIY tutorial

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

Had no luck trying to modify it for even the color.

 

[BassMan]

Any way to change the sub-node icon in a dropdown menu on the default style?

Try with this code:

/*** Sub-Node icons ***/
.subNodeLink { 
    &.subNodeLink--forum {
        // for read node
        .subNodeLink-icon {
            color: blue;
        }
        // for unread node
        &.subNodeLink--unread .subNodeLink-icon {
            color: red;
        }
    }
}
/*****/

 

[frm]

Try with this code:

I appreciate it!

But, can it be done on a per-node basis, or is the only way to achieve it is a blanket of all subnodes? If the latter, I'll just stick with the default.

I'm not trying to achieve a color change, but an icon change. I think if I were able to get the per-node code for color, I could do the icon. But, if XF isn't setup to change icons per sub-node, then it's not needed.

 

[BassMan]

I don't see there is an option only for one sub-node.

 

[CL4Y]

Hello,

Can we just batch replace all subcategories with a different image?

 

[CL4Y]

Hello,

Can we just batch replace all subcategories with a different image?

View attachment 316031

This topic was helpful, thank you, I need to do a little more research

Post in thread '[cXF] Node icons with image'

Jul 19, 2024

How to change sub-node icon in forum homepage with png images as read and unread?

Try with this code:

.subNodeLink {
    &.subNodeLink--forum {

        .subNodeLink-icon {
            background-image: url('/images/your_image.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        &.subNodeLink--read .subNodeLink-icon {
            opacity: 0.4;
        }
    }
}

• BassMan

 

[maszd]

Hi @BassMan

In XF 2.2, I used this code from you:

/*** Change default FA node icon **/
.node {
    &.node--forum, &.node--category {

        .node-icon i:before {
            .m-faBase();
            content: "\f4b0";
        }
    }
    .subNodeLink.subNodeLink--forum .subNodeLink-icon:before {
        .m-faBase();
        content: "\f4b0";
    }
}
/*****/

However, it doesn’t work in XenForo 2.3.
it's there any new css for fix this?

Thanks.
Regards.

 

[BassMan]

Hi @maszd,

Yes, check the overview page for XF 2.3 code.

 

[maszd]

Hi @maszd,

Yes, check the overview page for XF 2.3 code.

I'm use this code:

.node .node-icon i { &:before {.m-faContent(@fa-var-duotone-comment-lines, 1em);}
    svg {display: none;}}

.subNodeLink.subNodeLink--forum .subNodeLink-icon:before {.m-faContent(@fa-var-comment-lines, 1em);}
    svg {display: none;}

It works, but the poll icon and other icons in the thread list view have disappeared

 

[BassMan]

Just tested and it all works fine.

You are showing me the forum_view, but this code changes the icon for forum node on the forum_list template. And if I add that code, I can still see the poll icon in the forum_view. So there must be someting else.