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

[Kevin]

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) <i class="fab fa-mastodon"></i> 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🔥]

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

Prior to 2.3 I could add (for example) <i class="fab fa-mastodon"></i> 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]

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]

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

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

 

[Kevin]

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

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

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]

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

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

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:

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

Can anyone get this to work for 2.3? Thanks!

• beerForo
• Replies: 8
• Forum: Styling and customization questions

 

[Kevin]

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]

This seems to work

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

 

[Kevin]

This seems to work

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

Thanks! That's working.

 

[WoodiE]

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

When I try to add:

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

and save the widget I get the following error:

 

[WoodiE]

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

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

 

[stacy.c]

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

 

[Russ]

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]

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]

Thanks Russ.

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

.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]

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:

<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

<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:

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

will show no icon.

WHY?


Can someone please help me out?

kr Chris

 

[Yenxji]

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

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

 

[Mr Lucky]

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

[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]

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]

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