[cXF] Change default FA node icon

[BassMan]

BassMan submitted a new resource:

[cXF] Change default FA node icon - DIY tutorial to change default Font Awesome node icons

Would you like to change your default Font Awesome node icons like this?

< read node >
View attachment 2208


< unread node >
View attachment 2207



To change a single node icon with a different Font Awesome icon add this code to your extra.less template:

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

        .node-icon i:before {...

Read more about this resource...

 

[SilentGround]

Can you update this guide for duotone icons

 

[Old Nick]

Many thanks !

 

[Hambalie]

hai,

can you update this tutorial for latest fontawesome ?

and also why some icon can't show ?

 

[BassMan]

can you update this tutorial for latest fontawesome ?

It does not work?

and also why some icon can't show ?

Which one exactly?

 

[tomnjerry74]

and also why some icon can't show ?

If you're trying to use an icon from a different set, like "Font Awesome 5 Brands" you have to make sure to change the font-family for that specific node.

 

[Old Nick]

Hello, how to change icon for subforums in forum home ?

 

[BassMan]

Hello, how to change icon for subforums in forum home ?

Hello,

You can help with this resource: https://xenforo.com/community/resources/cxf-coloured-node-icons.6255/

Check for the subforums section.

 

[BassMan]

Hello, how to change icon for subforums in forum home ?

Regarding your post here: https://xenforo.com/community/threads/cxf-coloured-node-icons.144128/#post-1542953

Try with this code:

.node.node--id66 {
    &.node--forum {
        .node-icon i:before {
            .m-faBase();
            .m-faContent(@fa-var-bug);
        }
        .subNodeLink.subNodeLink--forum .subNodeLink-icon:before {
            .m-faBase();
            .m-faContent(@fa-var-bug);
        }
    }
}

 

[Old Nick]

Thanks mister BassMan but unfortunately it doesn't works for the icon on forum home

 

[BassMan]

Oh, you're using subforums in tooltip. Yes, for that one can not achieve this with CSS.

 

[Digital Jedi]

I've been having trouble figuring out how to actually change the family. Trying to set a Discord icon for a link forum.

 

[BassMan]

Change .m-faBase(); to .m-faBase('Brands');.

 

[Digital Jedi]

Gah! Thank you! I did that but didn't consider the single quotes.

It seems I didn't get the expected icon. I presume that has something to do with -var- part of the icon code?

 

[Digital Jedi]

For instance, I'm getting the Discord icon in the little voice balloon...



When what I wanted was just the icon.



Is this two icons overlayed, perhaps? Or just an older version of the icon.

 

[BassMan]

XenForo is running Font Awesome 5.15.3, but the Discord icon was changed in the Font Awesome release 5.15.4: https://fontawesome.com/v5/docs/changelog/

There is nothing much you can do now.

 

[Digital Jedi]

Ah, okay. That's one of the things I thought. I guess I can live with it for now. Thank you again.

 

[BassMan]

BassMan updated [cXF] Change default FA node icon with a new update entry:

Support for XenForo 2.3

• Support for XenForo 2.3

Read the rest of this update entry...

 

[BassMan]

BassMan updated [cXF] Change default FA node icon with a new update entry:

Code update for XF 2.2 and 2.3

• Code update for XF 2.2 and 2.3 (thank you @Jeremy P)

Read the rest of this update entry...

 

[hIBEES]

Anyone got a good football (soccer here in the uk)

The one on there looks like a steering wheel rather than a football.

Can you upload your own?

What folder are they actually in? styles/fa/ ..... I have 5 folders, I presume its regular?