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

Mr Lucky · Sep 19, 2024

Mr Lucky submitted a new resource:

Font awesome icons 2.3 - A general guide to using Font Awesome icons in xenforo 2.3

Introduction
There are two main situations where you might use font awesome (or other ) icons.

Pseudo elements (before &/or after text)
In this case you specify via CSS code that an icon appears before or after some text, e.g. a node title, prefix, or navigation item. This is usually done by adding some CSS code to the extra.less template.

For css pseudo elements (icon before/after text) use this format of code in extra.less...

XF 2.3 Post in thread 'Boosting performance in XenForo 2.3'

Sep 26, 2023

Font Awesome improvements

On almost every page we serve currently, we include as many as five different variants of the Font Awesome 5 Pro icon library. That's up to 8,000 icons split across their different variations, but on any given page we actually use... a lot less than that. The file size of each of these fonts is up to 200KB with an additional 40KB worth of CSS.

We have always wanted to ship a much smaller subset of icons but when admins, style designers and add-on developers have the full suite of icons available to them, this can be a challenge. In particular, working with...

@Mr Lucky it would have been visually comfortable to use the appropriate code blocks for each syntax, Less and HTML to name a few.
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. But using the .m-faContent syntax allows compatibility with XF 2.2...

hakyangler · Sep 19, 2024

Thank you for taking your time and sharing this, it's an instructive and useful topic for me.

Deleted member 184953 · Sep 19, 2024

About this:

Note that as well as inline CSS (as above style="...") you can alternatively define a class to use in your CSS (in template extra.less)
<xf:fa class="your-class" icon="fad fa-sparkles" aria-hidden="true" />

I usually add classes to FA icons this way:

HTML:

<xf:fa icon="fad fa-sparkless my-class" />

// even two classes

<xf:fa icon="fad fa-sparkless my-class another-class" />

it works very well.
I don't know if it's "academic" but it works, maybe @Jeremy P could confirm that it doesn't possibly cause problems later, elsewhere...

Jeremy P · Sep 19, 2024

I would recommend using the class attribute for classes and the icon attribute for selecting an icon.

Not that we have imminent plans to break this, but relying on unintentional behavior is always liable to cause compatibility issues in the long-term.

Deleted member 184953 · Sep 19, 2024

Thanks, so I have some code rewriting to do.

Mr Lucky · Sep 20, 2024

Old Nick said:
@Mr Lucky it would have been visually comfortable to use the appropriate code blocks for each syntax, Less and HTML to name a few.

Thanks done that, though I'm not sure it's appropriate to call <xf:fa icon="fal fa-sparkles" aria-hidden="true"/> html

Joe Link · Sep 20, 2024

Thanks for this @Mr Lucky

Do you happen to know how you would specify primary and secondary colors when calling a duotone icon via CSS? class="fa-secondary" doesn't seem to get added unless the icon is added via <xf:fa icon="fa-music">. I'm trying to add duotone icons to group banners but I can't seem to figure this out. I asked here also but no response yet.

🔥Iggy🔥 · Sep 20, 2024

curious about rotation syntax as well

Mr Lucky · Sep 21, 2024

Joe Link said:
Do you happen to know how you would specify primary and secondary colors when calling a duotone icon via CSS? class="fa-secondary" doesn't seem to get added

Sorry,

🔥Iggy🔥 said:
curious about rotation syntax as well

Me too!

Deleted member 184953 · Sep 21, 2024

I didn't try but something like that maybe:

Less:

.custom--duotone {
    color: var(--fa-primary-color, #000);
    color: var(--fa-secondary-color, #fff);
}

HTML:

<xf:fa icon="fad fa-user" class="custom-duotone" />

Joe Link · Sep 21, 2024

Old Nick said:
I didn't try but something like that maybe:

Less:

.custom--duotone { color: var(--fa-primary-color, #000); color: var(--fa-secondary-color, #fff); }

HTML:

<xf:fa icon="fad fa-user" class="custom-duotone" />

No luck, but I appreciate the attempt

Mr Lucky · Sep 21, 2024

Joe Link said:
No luck, but I appreciate the attempt

Could it be that those need FA 6 or pro which is not part of the default xenForo FA licence?

Deleted member 184953 · Sep 21, 2024

Of course, i'm dumb, in any case the second color property override the first one...
Maybe a clue here:

Post in thread 'Content Ratings [Paid]'

Mar 9, 2022

Xon said:
Ok, I'm kinda baffled then.

You'll need to point the browser tools at that html and inspect the actual css piled on it to determine what is happening.

It appears that it is not creating "::before" and "::after" elements in the html, which is where the css for the icon is stored. For example, this works correctly:

HTML:

<i class="sv-rating-type-icon  sv-rating-type-icon7 sv-rating-type-icon--css fad fa-handshake " title="Agree" aria-hidden="true">
::before
::after
</i>

the css attached to "::before" and "::after" reads:

CSS:

.fa-handshake:before {
content: "\f2b5";

}

.fad:before...

Jeremy P · Sep 21, 2024

Less:

.your-icon
{
    transform: rotate(180deg); // rotation

    color: #000; // color

    .fa-secondary
    {
        color: #FFF; // secondary color (duotone)
    }
}

Joe Link · Sep 21, 2024

Jeremy P said:

Unfortunately this doesn't seem to work with icons added via CSS (.m-faContent(@fa-var-duotone-star);) rather than <xf:icon>.

Joe Link said:
@Chris D

How do you specify primary and secondary colors when calling a duotone icon via CSS? class="fa-secondary" doesn't seem to get added unless the icon is added via <xf:fa icon="fa-music">. I'm trying to add icons to group banners but I can't seem to figure this out.

Jeremy P · Sep 21, 2024

Oh yeah, due to how CSS icons work it's not possible to customize their secondary color.

Joe Link · Sep 21, 2024

Ah bummer. So if I wanted to use duotone icons for userbanners I couldn't do so while using <xf:userbanner>, right?

Jeremy P · Sep 21, 2024

You can, but you would only be able to customize the primary color if you're applying them with CSS. You can use the JS renderer instead to allow further customization:

HTML:

<i class="fad fa-alien your-icon" data-xf-init="icon"><svg></svg></i> Alien

Joe Link · Sep 21, 2024

I'll look into that, thanks

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

Well-known member

Introduction​

Pseudo elements (before &/or after text)​

Deleted member 184953

Guest

XF 2.3 Post in thread 'Boosting performance in XenForo 2.3'

Font Awesome improvements​

Active member

Deleted member 184953

Guest

XenForo developer

Deleted member 184953

Guest

Well-known member

Well-known member

Well-known member

Well-known member

Deleted member 184953

Guest

Well-known member

Well-known member

Deleted member 184953

Guest

XenForo developer

Well-known member

XenForo developer

Well-known member

XenForo developer

Well-known member

Similar threads

We value your privacy

Introduction

Pseudo elements (before &/or after text)

Font Awesome improvements