Embedding font awesome icons in HTML text

[huber]

In a HTML help text (in i18n messages), I use embedded HTML symbols, like for example

Code: Select all

<h3>Button &#x26ed;&thinsp;&#x25bf;<h3>

which works fine. Now, I am experimenting to embed font awesome icons, but with no success yet. According to docu on the font awesome website, it should be something like:

Code: Select all

<span class="fas fa-circle"></span>

Is it even possible to embed font awesome in HTML text in Servoy?

[mboegem]

Hi Robert,

works straight away for me.
How did you install fontawesome / reference fontawesome css in your solution?

[huber]

Hi Marc

We included Font Awesome within the Servoy Package Manager Service. But from your asking I assume there is more to do, as my example works in your environment. Is there to import some library/libraries in the less/css style sheet?

Regards,

[mboegem]

Hi Robert,

Tried a fresh 2023.6 install running TiNG client.
Just a simple form with a label and text property set to:

Code: Select all

<span class="fas fa-circle"></span>

From SPM, the FontAwesome package was installed, this results in the FontAwesome stylesheet added to the styles.css file in the browser.
I didn't do anything else, but it just works.

It should not make a difference where the text is coming from, either i18n or directly set onto the text property.

Of course the only thing that could break this, is when the component isn't set to display html.
But for (bootstrap) labels, this is the default.

Hope this helps

[rafig]

Hi,
you could try adding this in your 'onSolutionOpen'

Code: Select all

plugins.fontawesomeLib.load();

Might help

[sanneke]

I always use i instead of span like the samples of FO:
<i class="fas fa-circle"></i>

[huber]

Hi Marc, Rafi, and Sanneke

Thanks a lot for your suggestions, which of course helped to find the problem. I used a servoyextra-htmlaera, which displayed all the information I had correctly, except for the aforementioned:

Code: Select all

<span class=fas fa-circle"></span>

or

Code: Select all

<i class=fas fa-circle"></i>

as Sanneke suggests.

Using a DataLabel, all the info is correctly displayed, including the font awesome circle. Thanks for the hint, Marc.

Best regards,

[mboegem]

Hi Robert,

glad it worked out.
Basically the issue was similar to the one in you recent post: using the HTML area.

In smart client HTML area's were the way to display HTML, but in (Ti)NG, everything is HTML.
So in most components, you can use HTML right away.

The specific issue to the HTML area is the underlying component: TinyMCE, which will display the HTML in an iframe
The HTML within the iframe is just unable to use the css/less file in your solution, that's why it doesn't understand your code.

Best thing would be to replace all HTML area's where you don't use it to edit HTML.