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

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

Overview Updates (1) Reviews (1) Discussion
Mr Lucky

Mr Lucky

Well-known member
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...
Click to expand...

Read more about this resource...
 
Great resource, questions about Font Awesome icons are recurring, we can direct members to this resource. 🙏

For reference I also offer this link:
Chris D

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

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...
  • Like
  • Love
  • Wow

@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...
 
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" />
Click to expand...

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...
 
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.
 
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.
Click to expand...
Thanks done that, though I'm not sure it's appropriate to call <xf:fa icon="fal fa-sparkles" aria-hidden="true"/> html :unsure:
 
Last edited:
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.
 
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" />
 
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" />
Click to expand...

No luck, but I appreciate the attempt :)
 
Of course, i'm dumb, in any case the second color property override the first one...
Maybe a clue here:
j0e

Post in thread 'Content Ratings [Paid]'

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.
Click to expand...
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...
 
Less: 
.your-icon
{
    transform: rotate(180deg); // rotation

    color: #000; // color

    .fa-secondary
    {
        color: #FFF; // secondary color (duotone)
    }
}
 
Jeremy P said:
Less: 
.your-icon
{
    transform: rotate(180deg); // rotation

    color: #000; // color

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

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.
Click to expand...
 
Oh yeah, due to how CSS icons work it's not possible to customize their secondary color.
 
Ah bummer. So if I wanted to use duotone icons for userbanners I couldn't do so while using <xf:userbanner>, right?
 
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
 
You must log in or register to reply here.
Back
Top Bottom