XF 2.3 FA Icons do not load or are not displayed properly.

[Newsman]

Hey y'all,

I have a template where each icon is basically a macro, for instance:

<xf:macro name="paper">
    <xf:fa icon="fa-solid fa-newspaper" />
</xf:macro>

Now, in the case of this icon, when I changed "fa-solid" to "fas", the icon loads - but for some reason it's less of a square like before and looks more like a rectangle instead. I've changed all the "fa-solid" into "fas" and some icons work properly while others do not even load at all. The ones with "fa-regular" have been changed into "far" and same result.

There seems to be something weird happening when I load these icons via macros into the templates. This is what the HTML Code looks like:

<i data-template-name="macros_icons::community" class="fa--xf fas fa-user-group ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="" role="img" aria-hidden="true"></svg>
</i>

So something loads - but the svg code is straight up missing. And this feels very random and I don't know what I can change to fix this..

Any idea what I can do?

Cheers!

Edit:

This sometimes appears in the browser console fwiw:

Error: <svg> attribute viewBox: Unexpected end of attribute. Expected number, "".

 

[Chris D]

I did have a suspicion when you posted this in the bug thread, but wasn't sure.

fa-solid is the wrong class name. You may have gotten that from the Font Awesome documentation for version 6. XenForo will be continuing to use Font Awesome 5 for the foreseeable future. You have to ensure you're looking at the documentation for version 5.

With that in mind, fas is the correct class name for a solid icon. far is the correct class name for "regular". fal is "light". fad is duotone. fab is for brands.

Change fa-solid in your example to fas and it will work fine.

 

[Newsman]

Well I'll be damned!

This pretty much solves it: I've used icons from the current default FA website (which is FA6) and because a lot of icons still worked with the old approach using the <i>-tags, I thought everything was fine. I'm now switching over to 5 (and using this search for anybody with similar issues: https://fontawesome.com/v5/ )

Icons load now, everything works as intended - I hope I didn't cause any unnecessary headaches.

Cheers!

 

[Mr Lucky]

I am finding that fas displays nothing

This shows a regular icon <xf:fa icon="fa-certificate" style="color:#ac8967" aria-hidden="true" />

This displays nothing: <xf:fa icon="fas-certificate" style="color:#ac8967" aria-hidden="true" />

 

[Chris D]

That's not correcr (never has been). It's fas fw-certificate

 

[Mr Lucky]

Is that "w" a typo? fas fw-certificate doesn't work but fas fa-certificate does work

 

[Chris D]

Yes. Typing code on a phone is a PITA