Could someone sanity check the font awesome spinning icons for me?

[Trying_to_learn]

I have got one of them working.

<i class="fa fa-spinner fa-spin fa-2x"></i>

works.

But if I try it with

<i class="fa fa-sync fa-spin fa-2x"></i>

nothing.

This is the site I am using:
spinning icons

And am I missing something with this part of their code:

<i class="fas fa-spinner fa-spin"></i>

Note the "fas fa-spinner
where as I have "fa fa-spinner

[zenofmud]

I believe NR only supports v4.7 font awesome. Is fa-sync a 4.7 font icon?

[Trying_to_learn]

I don't know. Their web page doesn't really say.

But also the syntax.....

fa fas ?

[zenofmud]

@Trying_to_learn

Their web page doesn't really say.

What webpage?

[Trying_to_learn]

@Trying_to_learn

This is the site I am using:
spinning icons

This is the site I am using:
spinning icons

[bakman2]

It does say, as @zenofmud said, NR only supports 4.7 icons

[afelix]

@Trying_to_learn because things aren’t confusing enough yet... the code you have is good and works for version 4.7 of Font Awesome. The code in the link you found is also good, but needs version 5+ of Font Awesome, which was released about 2 years ago. Font Awesome 5 introduced several base fonts with different styling, for example to allow Bold and Italic. It’s been almost 14 months ago that I last used version 5 in a project, but I believe the fas is now standing for “font awesome standard (font)”, to differentiate between the sets of fonts.

In practice however, none of this matters as the Dashboard only supports version 4.7 style font awesome icons. But thankfully the site I always used as cheatsheet for 4.7 still exists:
https://fontawesome.bootstrapcheatsheets.com/
That page shows the icon with the CSS class for all options you have for the Dashboard when using font-awesome.

[afelix]

One more thing to add in a new post rather than edit the previous one: as I just learned FA 4.7 does also allow some animations, specifically for the spinner too. I’m on mobile so I haven’t tested this in Node-RED yet but the following should work:

<i class="fa fa-spinner fa-spin"></i>

These classes mean the following:

• fa to signal that a font awesome icon is coming,
• fa-spinner for the spinner icon (see link in the previous post),
• fa-spin to set it to animate fluently

See the examples on this page that’s hard to find as they want everyone to use version 5 (because some parts of v5 are paid) instead.
https://fontawesome.com/v4.7.0/examples/
Specifically the part on animated icons but I can’t find an anchor to link it directly

[Trying_to_learn]

It is just a shame that the "update" one doesn't seem to be supported.

[afelix]

Coming from that developer experience with font-awesome 5, I’m not sure if it’s worth the trouble to get that working in the dashboard. FA5 wants you to use it internally in your JavaScript code mostly, and elsewhere in your project. You’ve to jump through hoops to use it elsewhere. I used it in combination with Vue and it took me a day to figure out how to use it. I’m back to font awesome 4.7 now
What could be improved is the documentation and finding information on the old FA 4.7 docs for the Dashboard, I’ll see if I can improve a few things there sometime

[dceejay]

AFAIK - all the links to fa-icons in dashboard info go to the 4.7 branch... if not please point them out and we will fix.

[Trying_to_learn]

(Don't worry.)

I think I was getting too far ahead of myself and was wanting to use the update one and I am now told that is not compatible.

[ukmoose]

Perhaps it’s worth adding a comment in your function code to remind you of this?

[Trying_to_learn]

You lost me.

If I use this on another flow and/or other machine. . . . .

Comments in the function code won't really work, as it is on another machine.

Where is there a definitive list of what is 4.7 and what is beyond?
That way I have a line in the sand for future reference.

[ukmoose]

I was suggesting that where you set the icons in your code you add a note that you can only use v4.7 of the FA set.

Where is there a definitive list of what is 4.7

Here’s the answer from last month…

Where is a list of the Dashboard Icons?

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…

[afelix]

@Trying_to_learn

Where is there a definitive list of what is 4.7 and what is beyond?

@afelix

But thankfully the site I always used as cheatsheet for 4.7 still exists:
https://fontawesome.bootstrapcheatsheets.com/

If the icon is shown in that link it works on 4.7. If the style has “fas” rather than “fa” it’s 5+
Beyond see the docs

[Trying_to_learn]

Yeah, sorry folks.

While all that is/was happening, I went and looked at the link.

Weird - and confession - but that is the site I was using.

Confession time:
I can't spell.
It isn't the cycle fa-icon.

It is the refresh one.
And as it is on that page, it does work.

It does help if I put the correct name for the icon in the command.

Just tried it and it does work.

(Ok, someone can shoot me)