FA icons on notices

[Old Nick]

FA icon syntax and "pre-load" FA icons seems to not working on notices.
This is the code i used in a notice and in a HTML widget

<xf:button class="button" icon="save">test</xf:button>
<br>
<xf:fa icon="fas fa-comments" /> Hello

And this is the results for the widget:



And for the notice

 

[Mr Lucky]

I would expect them to be like that based on the fact that the text field for a widget explicitly says you can use xenForo syntax




Whereas the notice text field only mentions html and specific things such as user_id, name and titles.



Time for a suggestion.

 

[Old Nick]

Wheres the notice text field only mentions html and specific things such as user_id, name and titles.

Correct, but as the old syntax for FA icons no longer works in 2.3, what is the solution for displaying FA icons in a notice?

<i class="fas fa-comments"></i> Comments

 

[Mr Lucky]

Ah I see what you mean, I would have thought that as notices display html, then the normal html FA display should work. But it doesn't.

Neither <i class="fa-solid fa-user"></i>

nor

<span class="fa-solid fa-user"></span>

 

[Kirby]

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 fa-comments" /> Hello

You can use this HTML everywhere (where HTML can be used):

<i class="fas fa-comments" data-xf-init="icon"></i> Comments

Or you could use a <svg> tag directly, but that may be a bit complicated.

 

[Old Nick]

Thanks @Kirby, useful post, as usual.