Searching for an icon

I have a routine that sends out a Heart beat and have icons that suffice to show it is running.

(Don't ask) :wink:

Now and then they are stopped. I didn't apply a good notification for this and so am now working on it.

As is, the heart beat icon is used and it toggles between teal and lime colours to show/indicate the heart is beating.

But what about when it is STOPPED??!!

For now I have just made the colour RED and it doesn't flash/blink.

Probably good enough, but... I'm me.

There isn't a DEATH icon floating around anywhere?
Or - at a stretch: PIRATE (Skull and crossbones) icon somewhere?

Just asking.

image
from Skull and crossbones Icons – Download for Free in PNG and SVG (icons8.com)

Thanks.

Now I am going to show my stupidity:

How do I use it?
The font awesome (etc) I just call them by name and the magically work.
I've not done any custom icons before.
(sorry.)
And - I'm guessing - SVG would be better than PNG
Maybe not. That costs $$ to download.

Font awesome

<i class="fa-solid fa-skull-crossbones"></i>

The other icon would have to be copied into a static directory and loaded (I think) just like any image.

Thanks.

But I'm missing something. (Yeah, my problem)

but I'm stuck on the path.....

Say I put it in my node-red/public/pictures/ directory.....
fa-skill-crossbones doesn't really have a path so I don't know where to put the file.

My bad, the font awesome icon is not available in v4.7, which is what Node-RED uses.

No problems.

But now I'm confused.

I'll see if I can work out how to use the png file to be shown in the text node to display the icon.

I vaguely remember I touched on it a long time ago.
But C.R.A.F.T. disease is painful.

Not strictly true ! :thinking: :thinking: :thinking:

:rofl: :rofl: :rofl:

1 Like

Yeah. But C.R.A.F.T. disease is a kicker.

Memory is not what I would like.

I'll look at the thread now.

Ok, but.... (Sorry but....)
That is when I use existing icons in the set.

This is a new one which is a .png file on my machine.
(Say in .node-red/public/pictures/)

I am not seeing a link to this specific case.

Oh!

Are you saying I could do something like what I did with the:
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
but point it to the new site?

(Thought a bit more about it.)
Nah, because that new site is for DOWNLOADING more than remote access to their icons.

Find an icon you like and add to a text node, see example .....

https://icon-sets.iconify.design/?query=skull

[{"id":"8bef6a9ca2b58129","type":"ui_text","z":"719a883a54bf61c7","group":"08cb253c5b8e93ae","order":3,"width":0,"height":0,"name":"","label":"Label","format":"<span class=\"iconify icon:fa6-solid:skull-crossbones\"></span>","layout":"row-spread","className":"","x":1355,"y":990,"wires":[]},{"id":"08cb253c5b8e93ae","type":"ui_group","name":"Group","tab":"dc50fb1.77df988","order":null,"disp":true,"width":6},{"id":"dc50fb1.77df988","type":"ui_tab","name":"Home Page","icon":"","order":1,"disabled":false,"hidden":false}]

Thanks.

But I'm stupid as I seem to be missing something.

(here's the rub for me.)

The code you posted works. And fair enough. You understand every part of it.
Down to the pixel level.

So I go to the link you posted above the code.
Only for the sake of learning I pick ANOTHER icon.
(And to be clear: I am not really sure WHICH one you picked/used anyway.)
Page 1, third row, third from the right.
https://icon-sets.iconify.design/openmoji/skull-and-crossbones/

That gives me this link
openmoji:skull-and-crossbones

I put that in and it does NOT work.

Now: YOUR example is similar but different.

icon:fa6-solid:skull-crossbones

So the line I have in the text node is:
<span class="iconify icon:fa6-openmoji:skull-and-crossbones"></span>
compared to
<span class=\"iconify icon:fa6-solid:skull-crossbones\"></span>

I see the solid vs openmoji is the difference. But I am not seeing the mechanical difference as that icon was from the link you gave me.

So I am missing a crucial part of how things work.

I'm not trying to be difficult. I want to understand (clearly) HOW it works.
Yes, that is my problem but if I don't ask, I won't get to know.

(I'm good at digging but I'm not sure it is helping)

There is another bump in things going smooth for me.

The example you gave:
I can't translate that to anything compatible with the code I have in a function node.

First line.

let msg1 = { payload: '<font color = \"red\"><i class="fa fa-heartbeat fa-2x"></i></font>' };
if (msg.topic === "RESET")
{
    //   Detect what the ENABLE command is.
    if (msg.payload === 'ACTIVATE')
    {
        //  If it is "true" indicate it is enabled and set 'enable'
        node.status({fill:"yellow",shape:"dot",text:"ENABLED"});
        context.set('enable',1);
    }
    //else
    if (msg.payload === 'DEACTIVATE')
    {
        //  Otherwise mark as disabled and reset 'enable'
        context.set('enable',0);
        node.status({fill:"red",shape:"dot",text:"DISABLED"});
        return [null,msg1];
    }
}
//  Now act of message which is not the "ENABLE" command.
if (msg.topic != "ENABLE")
{
    //  Check if 'enable' is set to 1
    if (context.get('enable') == 1)
    {
        //  Pass message through
        node.status({fill:"green",shape:"dot",text:"ENABLED"});
        return msg;
    }
}

let msg1 = { payload: '<font color = \"red\"><i class="fa fa-heartbeat fa-2x"></i></font>' };

Your line is:
(and given it is to be put in a text node)
<span class="iconify icon:fa6-solid:skull-crossbones"></span>

To me they are two different structures.
Yes, my fault/problem.

But I am missing something - still.

Oh, the icon type.
I'm GUESSING a CRUCIAL part of the selection is:
You posted:
https://icon-sets.iconify.design/openmoji/
When REALLY it should have been:
https://icon-sets.iconify.design
then pick Font Awesome Solid
Then search for skull.

As is I was looking in the openmoji flavour - which had me going nowhere fast.
Anyway... Now I'm stuck on how to change the line so it works in the function node.

I've NEARLY got it working.

NEARLY being the important word.

let msg1 = { payload: '<font color = \"red\"><i class="iconify icon:fa6-solid:skull-crossbones" fa-2x"></i></font>' };

Even if I make it fa6-2x it doesn't work/scale up.
And the SMALL icon kind of takes away from the importance of the message.

I can't find any instructions on how to upscale fa6- series icons.

One way is to edit the Group Label style in a ui-template

<style>
    .nr-dashboard-text .value{
        font-size: 2em;
    }

</style>

Now you are talking black magic to me. :wink:

WAY WAY above my skill set.

I get what you are saying, but I don't know if that will mess up anything else on any other page/s.

Thanks though, but I am ..... reluctant to do it for the reason I just said.

Try

<font color = "red"><i class="iconify icon:fa6-solid:skull-crossbones  fa-2x"></i></font>

You have an extra " between bones & fa-2x

fa-1x, fa-2x, fa-3x & fa-4x should all work

1 Like

{{THANKS}} I'm stupid.

That is me not understanding the structure completely.

Um.

(oh boy)

It works on THIS machine - the test bed.

But when I move it to THE machine.... It doesn't.

I don't see the icon.

I'll check what is being sent.

BRB.

This is the icon name as you see on the web page

This is how to use it - note the fa6-solid: bit belongs to the name of the icon I choose. So it is not used for other icons.

<span class="iconify icon:openmoji:skull-and-crossbones fa-2x"></span>

This also works in a template node. But if you want to inject the icon in a message then use

<span class={{msg.payload}}></span>