# How to change the colour of this icon. FA-Icon
**URL:** https://discourse.nodered.org/t/how-to-change-the-colour-of-this-icon-fa-icon/2754
**Category:** Dashboard
**Created:** [1 September 2018 22:14 UTC](https://discourse.nodered.org/t/how-to-change-the-colour-of-this-icon-fa-icon/2754 "2018-09-01T22:14:08Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [1 September 2018 22:14 UTC](https://discourse.nodered.org/t/how-to-change-the-colour-of-this-icon-fa-icon/2754/1 "2018-09-01T22:14:08Z")
I am using the fa icon group and have this bit of code.
```auto
if (msg.payload == "On-line")
{
//
msg = {payload: ''};
node.status({fill:"green",shape:"dot",text:"On-line"});
} else
{
//
msg = {payload: ''};
node.status({fill:"red",shape:"dot",text:"Off-line"});
}
return msg;
```
Where I am falling over is the colour.
Status quo, the colour is set by the nr-dashboard-ok part.
And there are two options. ok or error.
Ok, I can change the definition of the colour. But alas it isn't that simple.
I am wanting to have three colours.
But to maintain the standard, I have to use the nr-dashboard-xxx part.
Where can I get a list of how to put more options in there.
I have looked at this site:
[nr-dashboard](https://github.com/node-red/node-red-dashboard/blob/master/src/theme.less)
But I get confused when it goes to the:
and the line below.
```auto
body.nr-dashboard-theme .nr-dashboard-color { color: @groupTextColor; }
```
Because if I make the line:
```auto
msg = {payload: ''};
```
It doesn't work.
I picked the values at random. But I am wanting a kind of yellow colour.
Thanks in advance.
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [2 September 2018 00:03 UTC](https://discourse.nodered.org/t/how-to-change-the-colour-of-this-icon-fa-icon/2754/2 "2018-09-02T00:03:20Z")
For yellow use the "warning" class
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [2 September 2018 00:06 UTC](https://discourse.nodered.org/t/how-to-change-the-colour-of-this-icon-fa-icon/2754/3 "2018-09-02T00:06:56Z")
Appreciated.
I am confused though with the other stuff around it.
I haven't got enough courage (?) to know all the workings of how "nr-dashboard-warning" works.
I am sure I tried it and all I got was a WHITE version of the icon, not a yellow one, so where does that code set the colour?
Just asking.
This is the line I (finally) got to work:
```auto
msg = {payload: ''};
```
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [2 September 2018 00:11 UTC](https://discourse.nodered.org/t/how-to-change-the-colour-of-this-icon-fa-icon/2754/4 "2018-09-02T00:11:58Z")
You could use the font-color tag instead, for other colors:
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [2 September 2018 00:15 UTC](https://discourse.nodered.org/t/how-to-change-the-colour-of-this-icon-fa-icon/2754/5 "2018-09-02T00:15:36Z")
> [@Trying\_to\_learn](#):
>
> how "nr-dashboard-warning" works.
> I am sure I tried it and all I got was a WHITE version of the icon, not a yellow one, so where does that code set the colour?
Explaining: nr-dashboard-warning is the name of a CSS class. Inside the class definition you can see what is the color defined.
body.nr-dashboard-theme .nr-dashboard-error { color: #ff2929; }
body.nr-dashboard-theme .nr-dashboard-warning { color: #eaf42f; }
body.nr-dashboard-theme .nr-dashboard-ok { color: #49db3c; }
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [2 September 2018 00:16 UTC](https://discourse.nodered.org/t/how-to-change-the-colour-of-this-icon-fa-icon/2754/6 "2018-09-02T00:16:50Z")
Again: Thanks.
But (sorry) I don't have the fields you show.
I don't know how to "identify the node" once it is in a flow.
I think it is a NUMBER input node... Dunno, but this is the code:
Oh, there you go. It is a UI\_TEXT node - I think. Top line in the code.
```auto
[{"id":"215b8976.4a058e","type":"ui_text","z":"c636aa5a.cc34","group":"1f5fe937.c354c7","order":1,"width":"2","height":"1","name":"82","label":"82","format":"{{msg.payload}}","layout":"row-center","x":3510,"y":550,"wires":[]},{"id":"1f5fe937.c354c7","type":"ui_group","z":"","name":"Cat-5","tab":"1c792414.600e94","order":3,"disp":true,"width":"10","collapse":false},{"id":"1c792414.600e94","type":"ui_tab","z":"","name":"Telemetry","icon":"dashboard","order":2}]
```
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [2 September 2018 00:18 UTC](https://discourse.nodered.org/t/how-to-change-the-colour-of-this-icon-fa-icon/2754/7 "2018-09-02T00:18:29Z")
> [@Andrei](#):
>
> Explaining: nr-dashboard-warning is the name of a CSS class. Inside the class definition you can see what is the color defined.
>
> body.nr-dashboard-theme .nr-dashboard-error { color: #ff2929; }
> body.nr-dashboard-theme .nr-dashboard-warning { color: #eaf42f; }
> body.nr-dashboard-theme .nr-dashboard-ok { color: #49db3c; }
But where are these lines?
In which file?
(Sorry if we are tripping over each other's replies.)
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [2 September 2018 00:18 UTC](https://discourse.nodered.org/t/how-to-change-the-colour-of-this-icon-fa-icon/2754/8 "2018-09-02T00:18:54Z")
The screenshot I have used was taken from the config of an inject node. It is the easier way for you to test.
Flow:
```auto
[{"id":"b195cce4.3c5d5","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"f4996196.d495","type":"ui_text","z":"b195cce4.3c5d5","group":"3dfd1195.df4f4e","order":4,"width":"1","height":"1","name":"indicator","label":"","format":"{{msg.payload}}","layout":"row-center","x":560,"y":160,"wires":[]},{"id":"a2b85955.22e8a8","type":"inject","z":"b195cce4.3c5d5","name":"unlock","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":390,"y":160,"wires":[["f4996196.d495"]]},{"id":"3dfd1195.df4f4e","type":"ui_group","z":"","name":"Test","tab":"d50effcd.c6b68","disp":true,"width":"6","collapse":false},{"id":"d50effcd.c6b68","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":5}]
```
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [2 September 2018 00:23 UTC](https://discourse.nodered.org/t/how-to-change-the-colour-of-this-icon-fa-icon/2754/9 "2018-09-02T00:23:18Z")
> [@Trying\_to\_learn](#):
>
> But where are these lines?
>
> In which file?
>
> (Sorry if we are tripping over each other's replies.)
My reply: From the very same link you have shared in your post.
> I have looked at this site:
> [nr-dashboard](https://github.com/node-red/node-red-dashboard/blob/master/src/theme.less)
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [2 September 2018 00:28 UTC](https://discourse.nodered.org/t/how-to-change-the-colour-of-this-icon-fa-icon/2754/10 "2018-09-02T00:28:13Z")
Ok....
(catch up time)
This line was added (replaced) and all seems to work, and I think it is "tidier" than the mess I had.
```auto
msg = {payload: ''};
```
That link I mentioned confused me, as it went on and did/does say that, but (to me) it is out of context, as it doesn't say (clearly enough) where they are assingned.
It only shows code.....
But not where/how to set them.
Maybe I need to learn a bit more about it.
But it is working and I have learned a bit more.
Thing is, I think something else has been pushed out the other end/side. Shame I don't know what that is though. ☹
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [2 September 2018 00:32 UTC](https://discourse.nodered.org/t/how-to-change-the-colour-of-this-icon-fa-icon/2754/11 "2018-09-02T00:32:40Z")
> [@Trying\_to\_learn](#):
>
> But it is working and I have learned a bit more.
Good, if it was useful for your it may be for someone else in the future so please mark the post as resolved. 😉