# Fontawesome icon not appearing in flows.nodered.org

**URL:** https://discourse.nodered.org/t/fontawesome-icon-not-appearing-in-flows-nodered-org/32748
**Category:** General
**Created:** [11 September 2020 13:37 UTC](https://discourse.nodered.org/t/fontawesome-icon-not-appearing-in-flows-nodered-org/32748 "2020-09-11T13:37:44Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [11 September 2020 13:37 UTC](https://discourse.nodered.org/t/fontawesome-icon-not-appearing-in-flows-nodered-org/32748/1 "2020-09-11T13:37:44Z")

</div>

Hi folks,

I got an issue on Github that the icon of my node is not appearing on [flows.nodered.org](http://flows.nodered.org):

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/e/0ed957b1156789727873abe4857887d1871d57be.png)

If found out that this is the case for all my nodes that use a FontAwesome icon, like this:

```auto
...
outputs: 1,
icon: "font-awesome/fa-calculator",
paletteLabel: 'calc',

```

The icon appears correctly in the flow editor:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/a/5aaf6356651194c7a33d3d536ad59b5445c3226d.png)

Not sure what is wrong with the generated html on the flows site:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/d/fd188873e6f84dcace752a1b41f4abfacb847d7e.png)

I assume that is an esthetical, low-priority 'hidden feature'...

Bart

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [11 September 2020 13:53 UTC](https://discourse.nodered.org/t/fontawesome-icon-not-appearing-in-flows-nodered-org/32748/2 "2020-09-11T13:53:10Z")

</div>

Yeah... the flow library hasn't been updated to know about font-awesome icons yet.

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [11 September 2020 13:56 UTC](https://discourse.nodered.org/t/fontawesome-icon-not-appearing-in-flows-nodered-org/32748/3 "2020-09-11T13:56:16Z")

</div>

Then it is in the category _"maybe later, maybe never ..."_.  
It is not life threatening!!!

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [11 September 2020 18:05 UTC](https://discourse.nodered.org/t/fontawesome-icon-not-appearing-in-flows-nodered-org/32748/4 "2020-09-11T18:05:59Z")

</div>

PRs always help.

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [11 September 2020 18:29 UTC](https://discourse.nodered.org/t/fontawesome-icon-not-appearing-in-flows-nodered-org/32748/5 "2020-09-11T18:29:05Z")

</div>

> [@BartButenaers](#):
>
> Not sure what is wrong

...........

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [11 September 2020 18:40 UTC](https://discourse.nodered.org/t/fontawesome-icon-not-appearing-in-flows-nodered-org/32748/6 "2020-09-11T18:40:19Z")

</div>

It does not use icon as icon but background image from constructed path. So the icon you have declared in nodes html must exist in correct folder and should be usable as image.

I think to make support of some icon set makes another trap in therms of if this is supported, why that is not. So may be not that easy to make some fancy solution here.

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [11 September 2020 19:05 UTC](https://discourse.nodered.org/t/fontawesome-icon-not-appearing-in-flows-nodered-org/32748/7 "2020-09-11T19:05:17Z")

</div>

> [@hotNipi](#):
>
> So the icon you have declared in nodes html must exist in correct folder and should be usable as image

Aah, like you have done in `node-red-contrib-ui-level` - [node-red-contrib-ui-level/ui-level.html at master · hotNipi/node-red-contrib-ui-level · GitHub](https://github.com/hotNipi/node-red-contrib-ui-level/blob/master/ui-level.html#L88)

![icon](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/f/ff051bd9f382ec8eba894151aa035b8bc321a0ff.jpeg)

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [11 September 2020 19:06 UTC](https://discourse.nodered.org/t/fontawesome-icon-not-appearing-in-flows-nodered-org/32748/8 "2020-09-11T19:06:14Z")

</div>

> [@hotNipi](#):
>
> the icon you have declared in nodes html must exist in correct folder and should be usable as image.

Except if you specify a font awesome icon as Bart has done.

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [11 September 2020 19:08 UTC](https://discourse.nodered.org/t/fontawesome-icon-not-appearing-in-flows-nodered-org/32748/9 "2020-09-11T19:08:09Z")

</div>

> [@knolleary](#):
>
> Except if you specify a font awesome icon as Bart has done.

But I assume that the FA icon can be easily converted to a png, and used as above.

Like this in black, or in white next to it (that erm.. you can't see, but you can download)  
 ![black-calculator](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dd8b66401d7ea3599a1236e4dbe101edceff424d.png) ![white-calculator](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/c/4cfc45609b8aa4cdd7a359bf75f29e882066605d.png)

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [11 September 2020 19:22 UTC](https://discourse.nodered.org/t/fontawesome-icon-not-appearing-in-flows-nodered-org/32748/10 "2020-09-11T19:22:41Z")

</div>

That was just the my poor explanation of how it works currently.

---

<div class="post-metadata">

### Author: ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)
#### Post date: [11 September 2020 21:39 UTC](https://discourse.nodered.org/t/fontawesome-icon-not-appearing-in-flows-nodered-org/32748/11 "2020-09-11T21:39:18Z")

</div>

I got burned by the alias naming thing once too. I had dropped the alias name into the node html file for the icon name, and the standard name for the given icon was available not the alias. FA web site kind of implies the aliases are always available... not always. Depends on how the developer implemented the FA library.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [10 November 2020 21:39 UTC](https://discourse.nodered.org/t/fontawesome-icon-not-appearing-in-flows-nodered-org/32748/12 "2020-11-10T21:39:45Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
