XF 2.3 Font awesome icon not working properly

FoxSecrets

Well-known member
I am building an add-on and need to show a font awesome icon.

I've put an IF condition to insert the icon, however, the icon code made for 2.3 version brakes the code when running in XF 2.2, and do not show the icon in XF 2.3.

How can I have an icon in both XF versions?

Code:
<xf:if is="{{$xf.versionId}} < '2030000'">
    <i class="fal fa-globe"></i>
<xf:else />
    <xf:fa icon="fa-light fa-globe" aria-hidden="true">
</xf:if>
 
have you tried...
Code:
<xf:if is="$xf.versionId < 2030000">
The problem isn't the IF condition, this is ok...
The real problem is the icon code for XF 2.3 version...

Code:
<xf:fa icon="fa-light fa-globe" aria-hidden="true">

This code brakes the add-on when running in XF 2.2, and do not show the icon in XF 2.3.
 
Gotcha.

The simplest solution would be to eliminate the conditional altogether and just use...

Code:
<i class="fal fa-globe" data-xf-init="icon"></i>

This should work fine in both 2.2 and 2.3+.
 
Nothing special, it's just the IF condition I posted initially. The code you provided works fine in XF 2.2 version.

Well, I got it working in XF 2.3, but I had to insert the font awesome script in the head tag and set the icon as solid , like <i class="fas fa-globe" ></I>

I thought it was supposed to work without the script... Shouldn't be integrated into XF 2.3?
 
<xf:fa icon="fal fa-globe" aria-hidden="true" />

If possible (only works where XF template syntax can be used) this is the recommended way to use FA and works just fine with XF 2.2 and 2.3, no need to tinker with <xf:if> or JS at all.
 
Last edited:
Back
Top Bottom