Wrong icon when using font-awsome icon?

[Nodi.Rubrum]

In my html file for my custom node...

<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...

That is an arrow not a thermometer.

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

The icon I want to use is part of the 4.7 bundle...

[Trying_to_learn]

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.

[Nodi.Rubrum]

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?

[Trying_to_learn]

Where are you putting this code?

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

[Nodi.Rubrum]

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.

[Nodi.Rubrum]

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...

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

[Trying_to_learn]

@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.

[knolleary]

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

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

[Nodi.Rubrum]

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

[dceejay]

most odd indeed - the css has them all

.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";
}

[Nodi.Rubrum]

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

[dceejay]

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

[knolleary]

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

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.

[Nodi.Rubrum]

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.

[Nodi.Rubrum]

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

[knolleary]

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.