Where is a list of the Dashboard Icons?

#1

I am wanting to use the "icons" on some of my dashboards.

Searching I get this:
From this link

The most well-known are Awesome (http://fontawesome.io/icons/). The newer versions are not supported (4.7 and 5), but there are many others! To use an Awesome font, add fa – in front of the name of the icon. For example fa-fire .

Fantastic.
The picture on that page doesn't get down to the letter F.
It doesn't even complete B.

So where is the list of the names of these icons?

I have SOME of them installed - don't as me their names - but one is on a dashboard.
So it is somewhere on the machine.

If I go into the node I see:

<i class="fa fa-lightbulb-o fa-2x nr-dashboard-warning"></i>

Searching for it yields:

me@me-desktop:~/.node-red$ pwd
/home/me/.node-red
me@me-desktop:~/.node-red$ lr | grep lightbulb
  ----====  Recursive list starts here  ====----
me@me-desktop:~/.node-red$ 

So it ain't in the .node-red directory.

0 Likes

#2

Fa-icons 4.7 is supported.
https://fontawesome.com/v4.7.0/icons/

1 Like

#3

Ok, thanks.

B-u-t...

Does this mean that:

<i class="fa fa-lightbulb-o fa-2x nr-dashboard-warning"></i>

The icon is NOT on my machine and is downloaded?

0 Likes

#4

No. Its already built into dashboard and available for use.

1 Like

#5

Thanks, so I have to get the list of names from the site you supplied?

I am odds in that if they are "built into the dashboard" - how does anyone get the names of what they are?

I got "lightbulb" because it was in a flow I got somewhere. so it "magically" worked.

Is that clearer for the problem of their names?

0 Likes

#6

I hear you. Though the info panel for both the button and switch widgets do have links

0 Likes

#7

So basically I have to bookmark this link and get names from there as needed.

Ok.

I can handle that.

0 Likes

#8

Yes, that is correct.

0 Likes

#9

Sorry to ask but I'm really a newbie on node-red matter...
I try to use awesome-fonts in a text node to display a door status : open or closed, using the door-open and door-closed icon. I use the following code as Value Format :

<font color= {{msg.color}} > <i class="fas fa-door-open"></i>{{msg.payload}} </font>

But, I don't get the door-open icon... I tried with fa instead of fas, to no avail. What is wrong with my code ? I also tried with fa-camera-retro, like the examples on Awesome site... and it worked.

Thanks for your help

0 Likes

#10

I think the problem is that you are not really telling it to USE the icon.
Though you have named it, with the class=....... It doesn't work like that.

This is how I did something similar.
I will only post what I know, and I hope you can see how it all works.

msg  = {payload: '<font color = "black" i class="fa fa-cog fa-2x "></i>'};

That is part of a build/test flow (included if you want to look)

Basically you could leave out the msg.payload part.

It also depends on which node you put it into.

Hope that helped a bit.

[{"id":"d4f6c7de.5c3028","type":"inject","z":"9fb43887.43d798","name":"","topic":"","payload":"4","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":230,"y":400,"wires":[["45768493.f44edc"]]},{"id":"45768493.f44edc","type":"function","z":"9fb43887.43d798","name":"","func":"msg  = {payload: '<font color = \"black\" i class=\"fa fa-cog fa-2x \"></i>'};\nreturn msg;\n","outputs":1,"noerr":0,"x":370,"y":400,"wires":[["61084fb.faf18b"]]},{"id":"61084fb.faf18b","type":"ui_text","z":"9fb43887.43d798","group":"c9674ee2.6b7ff","order":8,"width":"2","height":"1","name":"94","label":"Blah","format":"{{msg.payload}}","layout":"row-center","x":580,"y":160,"wires":[]},{"id":"c9674ee2.6b7ff","type":"ui_group","z":"","name":"Group2","tab":"e68d55fd.06eaa8","order":2,"disp":true,"width":"6","collapse":false},{"id":"e68d55fd.06eaa8","type":"ui_tab","z":"","name":"TEMP","icon":"dashboard","order":25}]
0 Likes

#11

I can't see door-open in the list of https://fontawesome.com/v4.7.0/icons/ are you sure its a v4.7 icon?

0 Likes

#12

No, you are right. I found them here : https://fontawesome.com/icons?d=gallery&m=free. I thought it was all Awesome icons available to red-note users... but it seems these are v5.0 cions. And I can't see the door's icons in v4.7.0. I will try to find a good-looking door icon candidate in the other available fonts.
Thanks for your help

0 Likes

#13

Thanks for your help.
Yes, I know that I did not use msg.payload correctly. In a first time, I just wanted to display a 'door' icon on the dashboard. But I did not success as, @ukmoose pointed out, the door icons are not part of the Awesome v4.7.0 set. I will try to find in the Material Design set...
Thanks again

0 Likes

#14

not possible with the font awesome 5, juste v4.7, v5 is more complicate to implement (I just read it some minutes ago)

0 Likes