# Wrong icon when using font-awsome icon?

**URL:** <https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521>\
**Category:** Developing Nodes\
**Created:** [22 July 2020 02:14 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521 "2020-07-22T02:14:38Z")\
**Posts on this page:** 17\
**Page:** 1

<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:** [22 July 2020 02:14 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/1 "2020-07-22T02:14:38Z")

</div>

In my html file for my custom node...

```auto
<script type='text/javascript'>
        RED.nodes.registerType('si7021',{
                category: 'under construction',
                color: '#a6bbcf',
                defaults: {
                        name: {value: ''}
                },
                inputs:1,
                outputs:1,
                icon: 'font-awesome/fa-thermometer-full',
                label: function() {
                        return this.name || 'si7021';
                }
        });
</script>

<script type='text/html' data-template-name='si7021'>
        <div class='form-row'>
                <label for='node-input-name'><i class='icon-tag'></i>Name</label>
                <input type='text' id='node-input-name' placeholder='Name'>
        </div>
</script>

<script type='text/html' data-help-name='si7021'>
        <p>A node that provides support for the si7021 sensor</p>
</script>

```

But what appears...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/f/8f3a597632a1b7410dd5d451d7cf45563b40062f.png)  
That is an arrow not a thermometer.

Try to do what the documentation states is possible...

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

The icon I want to use is part of the 4.7 bundle...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/1/219dfbd5969a61b83010bfd6f8d701374eefa1ea.png)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 July 2020 02:26 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/2 "2020-07-22T02:26:25Z")

</div>

I am not an expert, but...

`class="fa fa-ban` as an example

Note the leading: `fa ` (space in there too)

Yet, in your code:

`font-awesome/fa-thermometer-full'`

try:

`fa fa-thermometer-full` and see what happens.

---

<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:** [22 July 2020 02:40 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/3 "2020-07-22T02:40:18Z")

</div>

Tried it... No change, it appears I am getting the arrow icon as some type of default. I even tried a completely bogus icon reference and got the arrow again. My first attempt is exactly like the NR documentation example, as far as I can see.

If I change it back to say file.svg, that works, even the font-awesome/fa-automobile icon works. But none of the 'new' 4.7 icons seem to work. Which suggests that the 4.7 reference is wrong, in that 4.7 is not actually available, but maybe only 4.6 or some older version of the icon library?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 July 2020 02:43 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/4 "2020-07-22T02:43:39Z")

</div>

Where are you putting this code?

If you want to change the `node` icon, it is done differently.

 ![Screenshot from 2020-07-22 12-44-36](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/a/eaf5fc4fc932e67190c9d82fa539942eebcbded4.png)

![Screenshot from 2020-07-22 12-44-20](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/4/349bd2a9e2a05e6405c7c0b7cd9d9c3f2dea0932.png)

---

<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:** [22 July 2020 02:54 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/5 "2020-07-22T02:54:10Z")

</div>

Nope some of the original 4.7 icons do not work either. The 4.7 font awesome are built in per the NR documentation. So while automobile works, the older version of the thermometer, i.e. fa-thermometer-empty, does not work.

This is not code, this per the NR documentation, per how you qualify icons built-in to NR, via the node HTML file. So why the automobile icon works, but some others do not, makes no sense, maybe a bug, maybe something missing in the stated built in list of icons?

I searched the list of icons that NR shows via the UI, as noted above. If I use an icon in the NR UI list, font-awesome/fa-thermometer-0 is in the UI, in my HTML file, that works. But if I use fa-thermometer-empty as listed on the web site, that does not work. So something is out of wack.

---

<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:** [22 July 2020 03:13 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/6 "2020-07-22T03:13:20Z")

</div>

Ok, this weird... I fthink I figured out what is going on... The ALIAS for a given icon is listed in the NR UI. The ALIAS works in the HTML. But the real name of the icon does not work in either case above? Direct from the FA web site... Note the fine print to the bottom right...

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

Why would the ALIAS work but not the actual name, again per the web FA web site?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 July 2020 07:09 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/7 "2020-07-22T07:09:36Z")

</div>

> [@Nodi.Rubrum](#):
>
> Nope some of the original 4.7 icons do not work either

I think I have been down this road. Not all the 4.7 icons are given.

But saying that, I hope you saw what I did. It worked for me.

---

<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:** [22 July 2020 08:52 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/8 "2020-07-22T08:52:37Z")

</div>

That is strange.

We have our own mapping of font-awesome name to unicode character so we are able to use them as node icons. Checking that file I see we have both `fa-thermometer-0` and `fa-thermometer-empty` listed with the same unicode character - [https://github.com/node-red/node-red/blob/master/packages/node\_modules/@node-red/editor-client/src/js/font-awesome.js#L533-L538](https://github.com/node-red/node-red/blob/master/packages/node_modules/@node-red/editor-client/src/js/font-awesome.js#L533-L538)

So at a glance, not sure why it wouldn't work. Needs some more investigation.

---

<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:** [22 July 2020 12:49 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/9 "2020-07-22T12:49:23Z")

</div>

This is strange... you got that right! Why am I finding these things? LOL!

---

<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:** [22 July 2020 13:04 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/10 "2020-07-22T13:04:52Z")

</div>

most odd indeed - the css has them all

```auto
.fa-thermometer-4:before,
.fa-thermometer:before,
.fa-thermometer-full:before {
  content: "\f2c7";
}
.fa-thermometer-3:before,
.fa-thermometer-three-quarters:before {
  content: "\f2c8";
}
.fa-thermometer-2:before,
.fa-thermometer-half:before {
  content: "\f2c9";
}
.fa-thermometer-1:before,
.fa-thermometer-quarter:before {
  content: "\f2ca";
}
.fa-thermometer-0:before,
.fa-thermometer-empty:before {
  content: "\f2cb";
}

```

---

<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:** [22 July 2020 13:15 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/11 "2020-07-22T13:15:05Z")

</div>

I would say I did something wrong... but you can see I documented things very carefully... so the mystery continues.

---

<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:** [22 July 2020 13:25 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/12 "2020-07-22T13:25:40Z")

</div>

do any of the other "wordy" ones work ? like -half -full etc ?

---

<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:** [22 July 2020 13:53 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/13 "2020-07-22T13:53:09Z")

</div>

Had I looked at the code I linked to previously a little closer, I would have seen this bit:

> <https://github.com/node-red/node-red/blob/master/packages/node_modules/@node-red/editor-client/src/js/font-awesome.js#L815>

So whilst we have all of the fa icons listed, when the code generates the list of 'known' icons, it filters out the duplicates. I assume this was done so that when we display the icon picker we don't show duplicate icons. But it has the side-effect of meaning the editor doesn't recognise them as valid icons.

I've removed that filtering - I don't think it matters that the icon picker shows duplicates, particularly as it also displays the name of the icon. Plus a user may want to search for an icon by its duplicate name - so entirely reasonable for it to appear.

---

<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:** [22 July 2020 14:01 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/14 "2020-07-22T14:01:08Z")

</div>

Yeah, it is the 'alias' icons that would be duplicates, but they will have unique names, like -0 versus -empty. So technically they look the same but are named uniquely. The issue really, IMHO, belongs to FA library because they do the aliases, which I am not sure why they do.

---

<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:** [22 July 2020 14:02 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/15 "2020-07-22T14:02:41Z")

</div>

Oh, when will this change go live? Just so I know.

---

<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:** [22 July 2020 14:11 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/16 "2020-07-22T14:11:32Z")

</div>

It will be in 1.1.3, but I don't know when we'll release that. There have only been 3 fixes for pretty minor things gone in since 1.1.2, so no rush to release.

---

<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:** [20 September 2020 14:11 UTC](https://discourse.nodered.org/t/wrong-icon-when-using-font-awsome-icon/30521/17 "2020-09-20T14:11:37Z")

</div>

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