# Embedding font awesome icons in HTML text

**URL:** <https://forum.servoy.com/t/embedding-font-awesome-icons-in-html-text/21069>\
**Category:** Questions\
**Created:** [September 14, 2023, 12:26pm UTC](https://forum.servoy.com/t/embedding-font-awesome-icons-in-html-text/21069 "2023-09-14T12:26:04Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![huber](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/huber/32/5042_2.png) [@huber](https://forum.servoy.com/u/huber)\
**Post date:** [September 14, 2023, 12:26pm UTC](https://forum.servoy.com/t/embedding-font-awesome-icons-in-html-text/21069/1 "2023-09-14T12:26:04Z")

</div>

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

```auto
<h3>Button ⛭ ▿<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:

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

```

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

---

<div class="post-metadata">

**Author:** ![mboegem](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/mboegem/32/4399_2.png) [@mboegem](https://forum.servoy.com/u/mboegem)\
**Post date:** [September 15, 2023, 5:02pm UTC](https://forum.servoy.com/t/embedding-font-awesome-icons-in-html-text/21069/2 "2023-09-15T17:02:11Z")

</div>

Hi Robert,

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

---

<div class="post-metadata">

**Author:** ![huber](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/huber/32/5042_2.png) [@huber](https://forum.servoy.com/u/huber)\
**Post date:** [September 18, 2023, 7:25am UTC](https://forum.servoy.com/t/embedding-font-awesome-icons-in-html-text/21069/3 "2023-09-18T07:25:01Z")

</div>

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,

---

<div class="post-metadata">

**Author:** ![mboegem](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/mboegem/32/4399_2.png) [@mboegem](https://forum.servoy.com/u/mboegem)\
**Post date:** [September 19, 2023, 7:32pm UTC](https://forum.servoy.com/t/embedding-font-awesome-icons-in-html-text/21069/4 "2023-09-19T19:32:57Z")

</div>

Hi Robert,

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

```auto
<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

---

<div class="post-metadata">

**Author:** ![rafig](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/rafig/32/4463_2.png) [@rafig](https://forum.servoy.com/u/rafig)\
**Post date:** [September 19, 2023, 8:15pm UTC](https://forum.servoy.com/t/embedding-font-awesome-icons-in-html-text/21069/5 "2023-09-19T20:15:46Z")

</div>

Hi,  
you could try adding this in your ‘onSolutionOpen’

```auto
plugins.fontawesomeLib.load();

```

Might help ![:D]( "Very Happy")

---

<div class="post-metadata">

**Author:** ![sanneke](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@sanneke](https://forum.servoy.com/u/sanneke)\
**Post date:** [September 20, 2023, 11:47am UTC](https://forum.servoy.com/t/embedding-font-awesome-icons-in-html-text/21069/6 "2023-09-20T11:47:25Z")

</div>

I always use i instead of span like the samples of FO:

---

<div class="post-metadata">

**Author:** ![huber](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/huber/32/5042_2.png) [@huber](https://forum.servoy.com/u/huber)\
**Post date:** [September 20, 2023, 2:19pm UTC](https://forum.servoy.com/t/embedding-font-awesome-icons-in-html-text/21069/7 "2023-09-20T14:19:32Z")

</div>

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:

````auto
<span class=fas fa-circle"></span>
``` or ```
<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,

---

<div class="post-metadata">

**Author:** ![mboegem](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/mboegem/32/4399_2.png) [@mboegem](https://forum.servoy.com/u/mboegem)\
**Post date:** [September 20, 2023, 2:37pm UTC](https://forum.servoy.com/t/embedding-font-awesome-icons-in-html-text/21069/8 "2023-09-20T14:37:12Z")

</div>

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.
