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

**URL:** https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261
**Category:** Dashboard
**Created:** [8 September 2019 01:22 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261 "2019-09-08T01:22:06Z")
**Posts on this page:** 17
**Page:** 1

<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: [8 September 2019 01:22 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/1 "2019-09-08T01:22:06Z")

</div>

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](https://fontawesome.com/how-to-use/on-the-web/styling/animating-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`

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [8 September 2019 01:34 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/2 "2019-09-08T01:34:13Z")

</div>

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

---

<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: [8 September 2019 01:36 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/3 "2019-09-08T01:36:38Z")

</div>

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

But also the syntax.....

fa fas ?

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [8 September 2019 01:37 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/4 "2019-09-08T01:37:29Z")

</div>

> [@Trying\_to\_learn](#):
>
> Their web page doesn't really say.

What webpage?

---

<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: [8 September 2019 01:40 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/5 "2019-09-08T01:40:13Z")

</div>

> [@Trying\_to\_learn](#):
>
> This is the site I am using:  
> [spinning icons](https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons)

This is the site I am using:  
[spinning icons](https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons)

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [8 September 2019 05:09 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/6 "2019-09-08T05:09:43Z")

</div>

It does say, as @zenofmud said, NR only [supports 4.7 icons](https://fontawesome.com/v4.7.0/icons/)

---

<div class="post-metadata">

### Author: ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)
#### Post date: [8 September 2019 06:30 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/7 "2019-09-08T06:30:33Z")

</div>

@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/](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.

---

<div class="post-metadata">

### Author: ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)
#### Post date: [8 September 2019 09:10 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/8 "2019-09-08T09:10:34Z")

</div>

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:

```auto
<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/](https://fontawesome.com/v4.7.0/examples/)  
Specifically the part on animated icons but I can’t find an anchor to link it directly

---

<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: [8 September 2019 09:12 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/9 "2019-09-08T09:12:05Z")

</div>

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

---

<div class="post-metadata">

### Author: ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)
#### Post date: [8 September 2019 09:26 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/10 "2019-09-08T09:26:54Z")

</div>

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

---

<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: [8 September 2019 09:32 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/11 "2019-09-08T09:32:10Z")

</div>

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.

---

<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: [8 September 2019 09:34 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/12 "2019-09-08T09:34:06Z")

</div>

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

---

<div class="post-metadata">

### Author: ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)
#### Post date: [8 September 2019 09:39 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/13 "2019-09-08T09:39:45Z")

</div>

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

---

<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: [8 September 2019 09:42 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/14 "2019-09-08T09:42:52Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)
#### Post date: [8 September 2019 10:00 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/15 "2019-09-08T10:00:44Z")

</div>

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?](https://discourse.nodered.org/t/where-is-a-list-of-the-dashboard-icons/2219):
>
> I am wanting to use the "icons" on some of my dashboards. Searching I get this: [From this link](https://diyprojects.io/node-red-module-dashboard-gui/#.W25h7BgRWMA) The most well-known are Awesome ([http://fontawesome.io/icons/](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…

---

<div class="post-metadata">

### Author: ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)
#### Post date: [8 September 2019 10:01 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/16 "2019-09-08T10:01:33Z")

</div>

> [@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/](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 🙂

---

<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: [8 September 2019 10:03 UTC](https://discourse.nodered.org/t/could-someone-sanity-check-the-font-awesome-spinning-icons-for-me/15261/17 "2019-09-08T10:03:41Z")

</div>

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)
