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

Kevin · Nov 27, 2024

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

Thoughts on adding a FA icon to the custom user field value display HTML output?

Prior to 2.3 I could add (for example)  to the display HTML to display the Mastodon icon after the value but with 2.3 none of my experiments seem to be working to get it displayed.

🔥Iggy🔥 · Nov 27, 2024

Kevin said:
Thoughts on adding a FA icon to the custom user field value display HTML output?

Prior to 2.3 I could add (for example)  to the display HTML to display the Mastodon icon after the value but with 2.3 none of my experiments seem to be working to get it displayed.

i believe its the thing like <xf:fa icon="fa fa-bars" aria-hidden="true" />

Kevin · Nov 27, 2024

🔥Iggy🔥 said:
i believe its the thing like <xf:fa icon="fa fa-bars" aria-hidden="true" />

Thanks, unfortunately though that was one of my experiments and it would appear that for the custom user fields the display HTML is not parsed so you end up with the literal value of <xf:fa icon="fa fa-bars" aria-hidden="true"> in the output.

With 2.3, having to use a one-off class as Kirby suggested for the Title might be the only way.

Jeremy P · Nov 27, 2024

You can use the JS renderer to accomodate places which aren't phrased or don't support template syntax:

HTML:

<i class="fa fa-bars" data-xf-init="icon"></i>

Kevin · Nov 27, 2024

Jeremy P said:
You can use the JS renderer to accomodate places which aren't phrased or don't support template syntax:

HTML:



Oooooh, that works nicely! Thank you for both solving my issue and for pointing me in the direction of a solution I didn't know about.

beerForo · Nov 27, 2024

Jeremy P said:
You can use the JS renderer to accomodate places which aren't phrased or don't support template syntax:

HTML:



Oh that fixes my issue too! It works in the group banner text box. Thanks!

XF 2.3 Thread 'Fontawesome in group banner stopped working in 2.3'

Nov 11, 2024

I used to have it like this:

Code:

<i class="fa-icon-code"></i> TITLE here

Can anyone get this to work for 2.3? Thanks!

Kevin · Jan 14, 2025

I may have missed it (I did search first), for using the FA Brand icons in CSS/LESS, what is the syntax for 2.3? For example, instead of .m-faIcon(@fa-var-sparkles); I'd want to use the FAB Apple icon.

Mr Lucky · Jan 14, 2025

This seems to work

.m-faIcon(@fa-var-apple);

Kevin · Jan 14, 2025

Mr Lucky said:
This seems to work

.m-faIcon(@fa-var-apple);

Thanks! That's working.

WoodiE · Feb 5, 2025

@Mr Lucky how do I add an FA icon to a widget template?

When I try to add:

Code:

<xf:fa icon="fa-bullhorn" aria-hidden="true">

and save the widget I get the following error:

WoodiE · Feb 5, 2025

Got it figured out. I needed to add "fas" before the fa-bullhorn, like so:

Code:

<xf:fa icon="fas fa-bullhorn" aria-hidden="true"/>

stacy.c · Feb 6, 2025

Is there any way to simply add a fontawesome icon to the beginning of a widget title?

Russ · Feb 6, 2025

stacy.c said:
Is there any way to simply add a fontawesome icon to the beginning of a widget title?

We have an option in our styles (which I know you're using so I'm posting this) Style properties -> Sidebar -> Sidebar FA Icons

We populate popular widgets and it's easy to add others.

stacy.c · Feb 6, 2025

Russ said:
We have an option in our styles (which I know you're using so I'm posting this) Style properties -> Sidebar -> Sidebar FA Icons

We populate popular widgets and it's easy to add others.

Thanks Russ.

How do I specify which FA icon I want for a particular widget?

Russ · Feb 6, 2025

stacy.c said:
Thanks Russ.

How do I specify which FA icon I want for a particular widget?

Code:

.p-body-sidebar .block[data-widget-definition="new_threads"] .block-minorHeader:before { .m-faContent(@fa-var-comments); }

This code works outside of our framerwork any anyone else needs it as well. You just inspect the HTML and find the data-widget-defition, then replace comments with your icon name.

Hoib3rgA · Feb 14, 2025

Hy,
would someone get me started to have this running on xf2.3?

on my xf2.2 i use this code to change the font awesome icons at the navbar:

Code:

<xf:if is="property('xenfocus_navIcons')">.focus-wrap-nav .p-navEl-link,.offCanvasMenu-linkHolder .offCanvasMenu-link[data-nav-id]{

    &[data-nav-id="xa_showcase"]:before{ content: '\f05a'; }

}</xf:if>

but his won't work on 2.3.
When I use this code

Code:

<xf:if is="property('xenfocus_navIcons')">.focus-wrap-nav .p-navEl-link,.offCanvasMenu-linkHolder .offCanvasMenu-link[data-nav-id]{

    &[data-nav-id="xa_showcase"]:before{
     .m-faIcon(@fa-var-info);
    }

}</xf:if>

the fontawesome icon will be shown.
But using an icon with "two words", e.g. "circle-info", no icon will be shown!?!
Using this icon:

Code:

[...]
     .m-faIcon(@fa-var-circle-info);
[...]

will show no icon.

WHY?

Can someone please help me out?

kr Chris

Yenxji · Mar 2, 2025

Dear @Mr Lucky , @Jeremy P , Unfortunately, it doesn't work for my add-on (Games) if I just add this:

CSS:

[data-nav-id="games"]:before
{
    .m-faIcon(@fa-var-comments);
    margin-right:5px
}

Mr Lucky · Mar 2, 2025

Yenxji said:
Dear @Mr Lucky , @Jeremy P , Unfortunately, it doesn't work for my add-on (Games) if I just add this:

CSS:

[data-nav-id="games"]:before { .m-faIcon(@fa-var-comments); margin-right:5px }

View attachment 319680

It may be the addon, but have you tried the other way for navigation items:

{icon:far::comments}

Yenxji · Mar 2, 2025

Mr Lucky said:
It may be the addon, but have you tried the other way for navigation items:

{icon:far::comments}

Yup, it's my private addon I've built add-on myself.

And it worked, thank you very much! I tried to change the comments to game or games and it doesn't show the game icon. Also plugin / plugins doesn't work

Mr Lucky · Mar 2, 2025

Yenxji said:
And it worked, thank you very much! I tried to change the comments to game or games and it doesn't show the game icon.

{icon:far::gamepad}

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

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

Well-known member

Well-known member

Well-known member

XenForo developer

Well-known member

Well-known member

XF 2.3 Thread 'Fontawesome in group banner stopped working in 2.3'

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Active member

Well-known member

Active member

Well-known member

Active member

Well-known member

Well-known member

Well-known member

Well-known member

Similar threads

We value your privacy