How to change the colour of this icon. FA-Icon


I am using the fa icon group and have this bit of code.

if (msg.payload == "On-line")
    msg  = {payload: '<i class="fa fa-bullseye fa-2x nr-dashboard-ok"></i>'};
} else
    msg  = {payload: '<i class="fa fa-bullseye fa-2x nr-dashboard-error"></i>'};
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:

But I get confused when it goes to the:
and the line below. .nr-dashboard-color { color: @groupTextColor; }

Because if I make the line:

    msg  = {payload: '<i class="fa fa-bullseye fa-2x nr-dashboard-color { color: #888829; }"></i>'};

It doesn't work.
I picked the values at random. But I am wanting a kind of yellow colour.

Thanks in advance.



For yellow use the "warning" class

1 Like



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:

msg  = {payload: '<i class="fa fa-bullseye fa-2x nr-dashboard-warning { color: #eaf42f; }"></i>'};


You could use the font-color tag instead, for other colors:



Explaining: nr-dashboard-warning is the name of a CSS class. Inside the class definition you can see what is the color defined. .nr-dashboard-error { color: #ff2929; } .nr-dashboard-warning { color: #eaf42f; } .nr-dashboard-ok { color: #49db3c; }



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.



But where are these lines?

In which file?

(Sorry if we are tripping over each other's replies.)



The screenshot I have used was taken from the config of an inject node. It is the easier way for you to test.


[{"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":"<font color= #00A4DE><i class=\"fa fa-lightbulb-o fa-2x\"></i></font>","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}]


My reply: From the very same link you have shared in your post.

I have looked at this site:




(catch up time)

This line was added (replaced) and all seems to work, and I think it is "tidier" than the mess I had.

        msg  = {payload: '<font color = "yellow" i class="fa fa-bullseye fa-2x"></i>'};

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. :frowning:



Good, if it was useful for your it may be for someone else in the future so please mark the post as resolved. :wink:

1 Like