# Font Awesom Icon stacking

**URL:** <https://discourse.nodered.org/t/font-awesom-icon-stacking/2796>\
**Category:** Dashboard\
**Created:** [3 September 2018 08:19 UTC](https://discourse.nodered.org/t/font-awesom-icon-stacking/2796 "2018-09-03T08:19:40Z")\
**Posts on this page:** 7\
**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:** [3 September 2018 08:19 UTC](https://discourse.nodered.org/t/font-awesom-icon-stacking/2796/1 "2018-09-03T08:19:40Z")

</div>

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:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [3 September 2018 09:01 UTC](https://discourse.nodered.org/t/font-awesom-icon-stacking/2796/2 "2018-09-03T09:01:18Z")

</div>

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.

---

<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:** [3 September 2018 09:21 UTC](https://discourse.nodered.org/t/font-awesom-icon-stacking/2796/3 "2018-09-03T09:21:18Z")

</div>

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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [3 September 2018 09:24 UTC](https://discourse.nodered.org/t/font-awesom-icon-stacking/2796/4 "2018-09-03T09:24:10Z")

</div>

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

---

<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:** [3 September 2018 09:28 UTC](https://discourse.nodered.org/t/font-awesom-icon-stacking/2796/5 "2018-09-03T09:28:09Z")

</div>

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:

```auto
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. ☹ (Drats)

I feel I am nearly there.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [3 September 2018 09:33 UTC](https://discourse.nodered.org/t/font-awesom-icon-stacking/2796/6 "2018-09-03T09:33:52Z")

</div>

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>'}
```

---

<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:** [3 September 2018 09:36 UTC](https://discourse.nodered.org/t/font-awesom-icon-stacking/2796/7 "2018-09-03T09:36:38Z")

</div>

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.