Fixed BBCode Font Awesome icons not showing while previewing post/thread

[Sonic Fan Games HQ]

Affected version

2.3.3

Apologies if I posted in the wrong forums.

I'm currently working on an update to 2.3. We haven't updated in a while and figured it might be a good time.
With the changes in 2.3 regarding FA icons, I needed to find a way to implement back FA Icons in posts through Custom BBCodes (which is something that should really become native if you ask me, as it's quite useful). I was able to, with help from these two threads:

XF 2.3 Thread 'Font Awesome icons not working'

Jul 7, 2024

The older <i> method does not work. I've tried using the <xf:fa> and that doesn't work either. For example, this produces nothing:

<xf:fa icon="fas fa-yin-yang"></xf:fa>

The above is used in a custom BB code:

<xf:fa icon="fas fa-{text}" />

• schizoidnightmares
• bbcode fontawesome html
• Replies: 17
• Forum: Troubleshooting and problems

K

Post in thread 'FA icons on notices'

Jul 26, 2024

Notices don't support XenForo template syntax, ony HTML - the HTML widget does support XenForo template syntax.
(Yes, this is inconsistent ... you may want to check suggestions and / or post a new one)

The reason why you still see a button (but no icons) is due to browsers accepting invalid HTML (<xf:button>...</xf:button> is invalid HTML) and trying their best to render smth. useful - the tag has a class attribute so the browser applies this to the invalid tag.

You would get the same visual output with

<wtf class="button" icon="save">test</wtf>
<br>
<wtf2 icon="fas...

• Kirby

• 

The BBCode in particular:

<i class="fas fa-{text}" data-xf-init="icon"></i>

However, the icons won't show up while previewing the post:

Editor:


Preview:


As you can see, the space for the icon is there. If I check the inspector, it's also there but with an empty SVG tag:


If I post it, however. It works correctly.


Considering the SVG tag is empty in the preview, I figured it might have something to do with SVGs specifically, but I tried another BBCode with an <svg> tag and it worked flawlessly, so that wasn't it.


Please note, this worked perfectly on our old forums, which was in v2.1.15:

The old BBCode (which no longer works in 2.3):

<i class="fas fa-{text}"></i>

 

[XF Bug Bot]

Thank you for reporting this issue, it has now been resolved. We are aiming to include any changes that have been made in a future XF release (2.3.4).

Change log:

Fix some issues with the JS icon renderer and BBCode previews

There may be a delay before changes are rolled out to the XenForo Community.