# Change fa-icon in ui template with a message payload
**URL:** https://discourse.nodered.org/t/change-fa-icon-in-ui-template-with-a-message-payload/15993
**Category:** Dashboard
**Created:** [27 September 2019 11:05 UTC](https://discourse.nodered.org/t/change-fa-icon-in-ui-template-with-a-message-payload/15993 "2019-09-27T11:05:48Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@Chaos](https://discourse.nodered.org/u/Chaos)
#### Post date: [27 September 2019 11:05 UTC](https://discourse.nodered.org/t/change-fa-icon-in-ui-template-with-a-message-payload/15993/1 "2019-09-27T11:05:48Z")
I have a ui template node that i am wanting to be able to change the fa-icon by sending different msg.payloads. First i added "" To my button, which worked as it should. then i tried " which made the icon spin. (i was well impressed) so how to make it spin and stop ? so far i have tried various versions of this.
i have tried various versions of the "" bit but none seem to work. it would be nice to be able to create an template that could be injected with say... msg.icon to change its icon on the fly.
Thanks Chris.
---
### Author:  [@clickworkorange](https://discourse.nodered.org/u/clickworkorange)
#### Post date: [27 September 2019 11:30 UTC](https://discourse.nodered.org/t/change-fa-icon-in-ui-template-with-a-message-payload/15993/2 "2019-09-27T11:30:44Z")
I think the bits between "" went missing from your post? In any case, a template node displaying `msg.icon` is a doddle - in its most basic form you could do something like this:
```auto
```
The icon files should then be placed in your Node-RED `httpStatic` directory, in a subfolder called "icons". Check Node-RED's `settings.js` for the parameter `httpStatic`, which you can change if you want.
---
### Author:  [@Chaos](https://discourse.nodered.org/u/Chaos)
#### Post date: [27 September 2019 11:41 UTC](https://discourse.nodered.org/t/change-fa-icon-in-ui-template-with-a-message-payload/15993/3 "2019-09-27T11:41:43Z")
Thanks. My code did go missing in the post. I am wanting to use The fa-icons that work ok and to my knowledge are not in the icon folder specified in httpstatic. do i need to place these in there ?
i am trying to change the icon between "fa-cog" and "fa-cog fa-spin" to get it to spin or not.
---
### Author:  [@clickworkorange](https://discourse.nodered.org/u/clickworkorange)
#### Post date: [27 September 2019 11:44 UTC](https://discourse.nodered.org/t/change-fa-icon-in-ui-template-with-a-message-payload/15993/4 "2019-09-27T11:44:27Z")
In that case you can omit the leading "/" in my example; Node-RED stores its internal icons in a directory called "icons" below wherever its application root is. So the example would be:
```auto
```
**Edit:** This is incorrect - see further down.
---
### Author:  [@Chaos](https://discourse.nodered.org/u/Chaos)
#### Post date: [27 September 2019 12:00 UTC](https://discourse.nodered.org/t/change-fa-icon-in-ui-template-with-a-message-payload/15993/5 "2019-09-27T12:00:17Z")
I think i need to find where the "fa-icons are on my machine i am using at the moment. (Linux mint laptop just using for testing) I have a pi3 running the whole house that i have broken several times tinkering about. It has all the icons in a myIcons folder that httpStatic points to. But on this laptop they must be somewhere as they work using
thanks i will keep playing
---
### Author:  [@Chaos](https://discourse.nodered.org/u/Chaos)
#### Post date: [27 September 2019 12:01 UTC](https://discourse.nodered.org/t/change-fa-icon-in-ui-template-with-a-message-payload/15993/6 "2019-09-27T12:01:45Z")
whenever i type code it dissapears ?????
---
### Author:  [@clickworkorange](https://discourse.nodered.org/u/clickworkorange)
#### Post date: [27 September 2019 12:28 UTC](https://discourse.nodered.org/t/change-fa-icon-in-ui-template-with-a-message-payload/15993/7 "2019-09-27T12:28:38Z")
> [@Chaos](#):
>
> I think i need to find where the "fa-icons are on my machine
Not really necessary; I'm pretty sure a URL like "icons/fa-cog.png" will automatically point to wherever Node-RED stores its internal icon files. But having actually tried it myself, I found that it's better to not reference the filename of the icon, but to give some element the class `fa` plus the name of the FontAwesome icon you want to use. For example:
```auto
```
Where `msg.icon` = "fa-cog" etc.
---
### Author:  [@clickworkorange](https://discourse.nodered.org/u/clickworkorange)
#### Post date: [27 September 2019 12:31 UTC](https://discourse.nodered.org/t/change-fa-icon-in-ui-template-with-a-message-payload/15993/8 "2019-09-27T12:31:46Z")
> [@Chaos](#):
>
> whenever i type code it dissapears ?????
Code you want to appear in-line with the text in your message should be wrapped in single "backtick" characters (`), and a block of code goes between three backticks (```). At least on a UK keyboard this is in the top left, just below the "Esc" key, to the left of the "1" key.
---
### Author:  [@Chaos](https://discourse.nodered.org/u/Chaos)
#### Post date: [27 September 2019 12:41 UTC](https://discourse.nodered.org/t/change-fa-icon-in-ui-template-with-a-message-payload/15993/9 "2019-09-27T12:41:34Z")
works perfect ! ...and quite simple, you should of seen my first attempt with all the script and if..then..else rubbish.
thank you
---
### Author:  [@pinie\_pinie](https://discourse.nodered.org/u/pinie_pinie)
#### Post date: [10 February 2020 18:50 UTC](https://discourse.nodered.org/t/change-fa-icon-in-ui-template-with-a-message-payload/15993/10 "2020-02-10T18:50:39Z")
Hi there,
I also need a templete.
Would it be possible to set me a complete example (code).
Unfortunately my knowledge is not enough. Would be really nice.
Thank you very much.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [21 April 2020 08:47 UTC](https://discourse.nodered.org/t/change-fa-icon-in-ui-template-with-a-message-payload/15993/11 "2020-04-21T08:47:12Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.