Font awesome icons 2.3 - categories, nodes, prefixes, phrases, templates etc...

[beerForo]

I can't seem to get the forum node icons to change. The tutorial is for "categories" is that supposed to include forum nodes also?

 

[beerForo]

Thanks, so I have some code rewriting to do.

Can you share what you put in extra.less to change a forum node icon? Thanks!

 

[Old Nick]

Can you share what you put in extra.less to change a forum node icon? Thanks!

Sure!

.node .node-icon svg
{
    display: none;
}

.node.node--id2 .node-icon i:before
{
    .m-faIcon(@fa-var-duotone-megaphone, 0.9em);
}

 

[beerForo]

Perfect, thanks!

 

[🔥Iggy🔥]

experimenting around for fun a little.....seems like animations break transform:rotate?.....i found a way to kind of force it, but it halfway breaks the animation...feel like im missing something

 

[Alpha1]

I want to add a FA icon to custom fields. For example: I have a custom field with the field title Telephone and I want to add fa-solid fa-phone before the word telephone. How do I do this?

 

[🔥Iggy🔥]

experimenting around for fun a little.....seems like animations break transform:rotate?.....i found a way to kind of force it, but it halfway breaks the animation...feel like im missing something

i want to guess this is a specificity issue where i want it to rotate, THEN animate...but it seems like its trying to do them both at the same time perhaps...idk if there is a way or not for something like that tho....

 

[Mr Lucky]

Mr Lucky updated Font awesome icons 2.3 with a new update entry:

Update 1.1

Included how to replace individual forum node icons

Read the rest of this update entry...

 

[Mr Lucky]

I can't seem to get the forum node icons to change. The tutorial is for "categories" is that supposed to include forum nodes also?

Sorry for delay, now updated

experimenting around for fun a little.....seems like animations break transform:rotate?.....i found a way to kind of force it, but it halfway breaks the animation...feel like im missing something

I suggest you make a new thread to ask this as it's outside the scope of this resource guide.

 

[beerForo]

@Old Nick is there a way to use the "svg display none" code to only the applied icons, so default still show where we don't change them?

 

[Old Nick]

@Old Nick is there a way to use the "svg display none" code to only the applied icons, so default still show where we don't change them?

.node.node__idX .node-icon svg
{
    display: none;
}

I guess...

 

[Mr Lucky]

.node.node__idX .node-icon svg
{
    display: none;
}

I guess...

I can confirm it works:

Font awesome icons 2.3 - categories, nodes, prefixes, phrases, templates etc...

Sep 19, 2024

A general guide to using Font Awesome icons in xenforo 2.3

• Mr Lucky
• font awesome
• XenForo tips & guides [2.x]

 

[beerForo]

Cool, thanks

 

[Kirby]

I want to add a FA icon to custom fields. For example: I have a custom field with the field title Telephone and I want to add fa-solid fa-phone before the word telephone. How do I do this?

Depending on what exactly you want to do the easiest approach might be to change the field title to

{icon:fas::phone} Telephone

This will look broken in ACP but should work fine in the frontend.

A LESS approach (assuming your field name is phone, adjust as needed if not) could be

dl[data-field="phone"] dt
{
    .m-faBefore(@fa-var-solid-phone);
}

@Mr Lucky
.m-faContent() is deprecated...ish (it's an alias for backwards compatibility), you might want to update this to .m-faIcon()

 

[Alpha1]

Many thanks @Kirby !

 

[Mr Lucky]

.m-faContent() is deprecated...ish (it's an alias for backwards compatibility), you might want to update this to .m-faIcon()

Done thanks!

 

[Mr Lucky]

Mr Lucky updated Font awesome icons 2.3 - categories, nodes, prefixes, phrases, templates etc... with a new update entry:

1.2

Updated .m-faContent to .m-faIcon

Read the rest of this update entry...

 

[Old Nick]

Furthermore, even if .m-faContent works correctly, as your resource only concerns XF 2.3 therefore the recommended syntax is rather .m-faIcon for what concerns Font Awesome icons.

 

[Mr Lucky]

Merci beaucoup to Old Nick , sorry I missed that you'd spotted it first.

And changed the codebox name as appropriate.

 

[welington]

​

Everything a forum needs to make it more elegant and visually appealing, practical and objective tips that even I could do. (I'm a layman)
Great stuff Mr Lucky