Font Awesom Icon stacking

Dashboard
1

Well, dashboard......

I am wanting to try and stack some of the icons.

I have looked at the page where they show you how to do it, but it isn't for Node-Red - to my knowledge.

This is what they show:

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera

I can see "how" it works..... You set a CLASS of fa-stack (large?)
Then the two layers are defined.
The CLASS is closed.
Then the icons are called up.
I'm guessing the "on" means/implies the stack is used.

But (sorry) how do I do that in NR?
Say in a Function Node. So that way I can see what I want. I'll then change the icon names to what I want. But I have to start somewhere.

Thanks in advance.

2

The only part that is involved in the stacked icon is the <span> tag and it's contents.

The fa-ban on fa-camera is just some text the example displays next to the icon - it has no functional purpose in making it work.

So you can start by pasting that into a ui_template node to see what the result is in the dashboard.

What you do next depends on how/where you want the icon to appear. The UI nodes that let you enter a fa class name in one of their configuration fields will not support this stacked icon approach. This is because they only take a CSS class name, not a completel html snippet such as the tag.

3

Thanks.

This is what I have in my function node to be sent to a ..... ui_text node.
That seems to work for what I am doing at this stage.

msg  = {payload: '<font color = "red" i class="fa-stack fa-lg fa fa-camera fa-2x fa-stack-1x fa fa-ban fa-2x fa-stack-2x text-danger"></i>'};

But all I am seeing/getting is the "BAN" part. Not the camera.

4

You appear to have thrown all of the CSS classes into one element and lost the <span> structure of your previous post.

5

Ok.

It isn't being consistent with what I am seeing - or that's my excuse. (cheeky wink)

Originally I got the red "BAN" icon.

With this:

msg  = {payload: '<span font color = "red" i class="fa-stack fa-lg fa fa-camera fa-2x fa-stack-1x fa fa-ban fa-2x fa-stack-2x text-danger"></i></span>'};

I am getting a white one. :frowning: (Drats)

I feel I am nearly there.

6

You still don't have the same structure and you are also missing various < and > between the individual tags.

Start by taking the span tag you shared in the first post, put it all on one line:

 msg = { payload: '<span class="fa-stack fa-lg"><i class="fa fa-camera fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x text-danger"></i></span>'}
1 Like
7

I know this sounds corny (?spelling?) but I am sure I tried that and the Function node was not very happy.

Maybe I messed up the sets of either the ' or " or < > things.... Who knows?

Thanks.

I DO appreciate the help.