# Font awesom icons - stuck. (Stacking)

**URL:** <https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592>\
**Category:** General\
**Created:** [10 June 2024 09:16 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592 "2024-06-10T09:16:46Z")\
**Posts on this page:** 20\
**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:** [10 June 2024 09:16 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/1 "2024-06-10T09:16:46Z")

</div>

Looked here first:

> **[Font Awesome Examples](https://fontawesome.com/v4/examples/)**
>
> Font Awesome, the iconic font and CSS framework

Used the bottom one with the camera.

This is what I had and it works.

```auto
msg.payload = '<font color = yellow ><i class="fa fa-signing fa-flip-horizontal fa-2x"></i></font>';

```

This doesn't

```auto
msg.payload = '<font color = yellow > <span class="fa-stack"> <i class="fa fa-ban fa-2x fa-stack-1x"></i> <i class="fa-signing fa-2x fa-stack-2x"></i></span></font>';

```

Yes, I've removed the `flip-horizontal`.  
Trying to find which part is making it not work.

I would also like to make the `ban` `red`.... But for now... I am not remembering things as well as i would like.

Where's the illusive _elephant_? 😉

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [10 June 2024 09:24 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/2 "2024-06-10T09:24:20Z")

</div>

Not sure about your main question. But I can say that use of `<font>` is not recommended. Simply add `style="color:yellow"` to the `<i>` tag. That should fix your colour problem.

---

<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:** [10 June 2024 09:26 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/3 "2024-06-10T09:26:38Z")

</div>

I'm guessing it is old code that I learnt way back when I first started.

And double checking, that link I posted doesn't have it either.

This is what the line has become ITMT - though I don't know it is nice to post it in light of what you said.  
(Of course it still doesn't work)  
`msg.payload = '<font color = yellow > <span class="fa-stack"><i class="fa-signing fa-2x fa-stack-1x"></i> <i class="fa fa-ban fa-2x fa-stack-2x" style="color:Tomato"></i> </i></span></font>';`

I'll give what you said a try and report back.

---

<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:** [10 June 2024 09:32 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/4 "2024-06-10T09:32:32Z")

</div>

With this line:

```auto
msg.payload = '<span class="fa-stack"><i style="color:yellow" class="fa-signing fa-2x fa-stack-1x"></i> <i class="fa fa-ban fa-2x fa-stack-2x" style="color:Tomato"></i> </i></span></font>';

```

I get (picture)

![Screenshot from 2024-06-10 19-29-26](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/a/3a2e83d5225f0c0602c9935ca3a1ccdf4f60e2b5.png)

So I'm guessing somewhere I have a lot of CSS stuff working.

But if I do all the _styling_ in the line, that is **LOCAL** to that ..... `button` node.  
(Alas the `text` node doesn't allow background colour setting.)

Taking a step back:  
The `ban` is working.  
The `signning` isn't.

but in the _alternate_ line:  
`msg.payload = '<font color = yellow ><i class="fa fa-signing fa-flip-horizontal fa-2x"></i></font>';`

works.

🤷

To maybe give a bigger _picture_ here is the code and the `button` node:

```auto
[{"id":"832865263b1462a2","type":"function","z":"235f16ee6e459f2c","name":"Week check","func":"const timestamp = msg.payload\nconst weekno = Math.floor((timestamp + 345_600_000) / 604_800_000)\nconst result_ = Number(weekno) % 2\nif (result_ == 0) {\n msg.payload = '<font color = yellow ><i class=\"fa fa-signing fa-flip-horizontal fa-2x\"></i></font>';\n msg.flag = \"Wash\";\n return msg;\n}\nelse\n{\n// msg.payload = ' ';\n msg.payload = '<span class=\"fa-stack\"><i style=\"color:yellow\" class=\"fa-signing fa-2x fa-stack-1x\"></i> <i class=\"fa fa-ban fa-2x fa-stack-2x\" style=\"color:Tomato\"></i> </i></span></font>';\n msg.flag = \" \";\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1420,"y":4700,"wires":[["4e26090847259a9b","63e667ec355471b7"]]},{"id":"63e667ec355471b7","type":"ui_button","z":"235f16ee6e459f2c","name":"","group":"a71318e04a2701e3","order":14,"width":"1","height":"1","passthru":false,"label":"{{msg.payload}}","tooltip":"","color":"","bgcolor":"#333333","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":1580,"y":4700,"wires":[[]]},{"id":"a71318e04a2701e3","type":"ui_group","name":"Special days","tab":"94541d8e64761d52","order":5,"disp":true,"width":"6","collapse":true,"className":""},{"id":"94541d8e64761d52","type":"ui_tab","name":"Messages","icon":"volume-up","order":13,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [10 June 2024 09:40 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/5 "2024-06-10T09:40:35Z")

</div>

`fa-signing` - seems to be an invalid entry. So that is probably the problem. You will want to make sure that it is part of the Fontawesome v4 library and not a later version.

---

<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:** [10 June 2024 09:43 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/6 "2024-06-10T09:43:46Z")

</div>

Ok, thanks.

But...  
(sorry)

> **[fa-sign-language: Font Awesome Icons](https://fontawesome.com/v4/icon/sign-language)**
>
> Font Awesome, the iconic font and CSS framework

(Stupid question)

I'm not making spelling mistake with the name?

But if the result is the opposite, and the _other_ line is true:  
I get the icon.

Which is confusing to me.

# EDIT!

I'm missing the first `fa `!!??

Should be `fa fa-signing......`

I had only `fa signing.....`

Please check.

# OH, but!

Colours not working.

`function` node complete code:

```auto
const timestamp = msg.payload
const weekno = Math.floor((timestamp + 345_600_000) / 604_800_000)
const result_ = Number(weekno) % 2
if (result_ == 0) {
    msg.payload = '<font color = yellow ><i class="fa fa-signing fa-flip-horizontal fa-2x"></i></font>';
    msg.flag = "Wash";
    return msg;
}
else
{
    msg.payload = '<span class="fa-stack"><i style="color:yellow" class="fa fa-signing fa-flip-horizontal fa-2x fa-stack-1x"></i> <i style="color:Tomato" class="fa fa-ban fa-2x fa-stack-2x"></i> </i></span></font>';
    msg.flag = " ";
}
return msg;

```

So as is, the first one works and it IS yellow.

But in the (now) second case, I am now seeing both icons (stacked) but they are both white.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [10 June 2024 09:53 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/7 "2024-06-10T09:53:13Z")

</div>

Your link shows `fa-sign-language`, not `fa-signing` - however, both appear to work (now I fixed my own error!)

This works:

```auto
<span class="fa-stack" style="color:red;">
  <i class="fa fa-ban fa-2x fa-stack-1x"></i>
  <i class="fa fa-signing fa-2x fa-stack-2x"></i>
</span>

```

As does this which may be even better for you. 🙂

```auto
<span class="fa-stack">
  <i class="fa fa-ban fa-2x fa-stack-1x" style="color:red;"></i>
  <i class="fa fa-signing fa-2x fa-stack-2x" style="color:yellow;"></i>
</span>

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/94a359ef2a9f2c3017509baba269aeaa18093ce3.png)

Better still:

```auto
<span class="fa-stack">
    <i class="fa fa-signing fa-2x fa-stack-1x" style="color:yellow;"></i>
    <i class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
</span>

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/6/e63da8933258d77e1071841918a26f064aa50eb9.png)

---

<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:** [10 June 2024 10:09 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/8 "2024-06-10T10:09:25Z")

</div>

> [@TotallyInformation](#):
>
> ```auto
> <span class="fa-stack">
> <i class="fa fa-ban fa-2x fa-stack-1x" style="color:red;"></i>
> <i class="fa fa-signing fa-2x fa-stack-2x" style="color:yellow;"></i>
> </span>
> 
> ```

I'll swap the stack positions so the `ban` is on top.

Ok, it's got weird.  
It worked the first time and not subsequent times.  
So **I've** stuffed something up.

~~Quick question though:  
 `style = "color:red;"`~~

~~`;`??~~

I'm sure it worked.

Now I am not getting colours. 😕

And I can put all those 4 lines into one as `msg.payload = '<your code>`

That is:  
`msg.payload = '<span class="fa-stack"> <i class="fa fa-signing fa-2x fa-stack-1x" style="color:yellow;"></i> <i class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i> </span>'`

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [10 June 2024 14:44 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/9 "2024-06-10T14:44:51Z")

</div>

> [@Trying\_to\_learn](#):
>
> It worked the first time and not subsequent times.

Seems like an interaction with other code to me.

I am using UIBUILDER to test (of course!) rather than Dashboard but it should still work the same. Here was my final code:

```auto
        <div>
            <span class="fa-stack">
                <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
                <i class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
            </span>
        </div>

```

This appears to be working consistently.

However, I am now questioning why you are sending this in a message? Why not have it in your front-end code and simply turn it on when needed?

> [@Trying\_to\_learn](#):
>
> Now I am not getting colours

Check the browser dev tools to look for console errors AND check the elements page to make sure that the resulting HTML is actually what you think it is. And check the specific element against its CSS to see if something is overriding the CSS settings.

---

<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:** [10 June 2024 20:44 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/10 "2024-06-10T20:44:47Z")

</div>

> [@TotallyInformation](#):
>
> However, I am now questioning why you are sending this in a message? Why not have it in your front-end code and simply turn it on when needed?

Sorry, you lost me.

I've posted the code that controls which message is sent.

It checks if the week is _odd_ or _even_ numbered.

If odd, sends the hand.

If even, sends them but with a `ban` sign over the top.

(The actual _odd/even_: I'm not sure which is which.)

It is being sent as `msg.payload` to a `button` node set to receive `{{msg.payload}}` in the `label` field.

Ok, found a slight problem.  
The `button` node had the `background color` field filled in with `#333333`.  
Deleted, but no change.

Also, seems I was wrong wrt **stacked icons**.  
I can't find any case now on 3 machines that have it.

I was sure I had it.

I'll have to check my MAIN machine.  
But that has about 30 pages (GUI) so it is going to take a while.

# Sorry

Did some digging. Found an example!  
But it uses a `template` node and all the code is in there.  
Not sent to it.

If I copy the template and put your code it in on the desired machine, it works.  
(PROBLEM)  
I can't change the _symbol_.

Other thing noticed:  
If I send it as a `message`, it is monochrome. 😖

# FURTHER TESTING

If I put two `template` nodes and have one with the hands and the other with your code they BOTH work 100%

So now I have to try and work out what is _preventing_ the node accept a `msg.payload` and displaying it correctly.

To be clear: This needs to be in the `template` node to _pares_ the message:  
`<div ng-bind-html="msg.payload"></div>`

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 June 2024 21:33 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/11 "2024-06-10T21:33:30Z")

</div>

Why not simply add both sets of html to the template and & use payload to show 1 & hide the other.

Sending html is archaic and unmaintainable and as you have found, problematic.

---

<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:** [10 June 2024 21:35 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/12 "2024-06-10T21:35:29Z")

</div>

Thanks @Steve-Mcl .

Alas as I am not doing this all the time I don't know/remember how to do it.

So if I am using a `template` node (seems the only way I can get it working) would you please show me an example of how to do this?

---

<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:** [10 June 2024 22:09 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/13 "2024-06-10T22:09:50Z")

</div>

This is what I understand to this point in time.

```auto
<style>
    .wash
    {
        <i class="fa fa-signing fa-flip-horizontal fa-2x" style="color:yellow"></i>
    }
    .nowash
    {
        <span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
        </span>
    }
</style>

```

That sets the two _definitions_

But now I fall apart as I don't know the magic to _parse_ the `{{payload}}` and display the relevant _style_.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 June 2024 11:28 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/14 "2024-06-11T11:28:38Z")

</div>

> [@Trying\_to\_learn](#):
>
> Sorry, you lost me.
> 
> I've posted the code that controls which message is sent.
> 
> It checks if the week is _odd_ or _even_ numbered.
> 
> If odd, sends the hand.
> 
> If even, sends them but with a `ban` sign over the top.

So you could simply have everything already in place so you don't have to keep sending HTML all the time. Just send it once in your ui\_template and turn it on/off by just changing the class from a hidden to a visible style. This is the HTML way, not constantly sending more and more HTML to all the connected clients.

> [@Steve-Mcl](#):
>
> Why not simply add both sets of html to the template and & use payload to show 1 & hide the other.

👍 Actually, you only need 1 set of HTML, just turn on/off the bits you need. That's one of the great strengths of CSS and classes.

---

<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:** [11 June 2024 20:42 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/15 "2024-06-11T20:42:36Z")

</div>

Yes, I sort of understand the idea.

But the mechanics of doing that.....

That last post is 'css' - I'm guessing.

And it won't do the job, but MAY be the start of it.

Doing it with HTML... That's a whole other ball game.  
I've never really done anything with it and even less knowledgeable.

_Help_ please.

Just to show I'm not dumping it on anyone:

```auto
let week = msg.payload
if (week == 0)
{
    //
    <i class="fa fa-signing fa-flip-horizontal fa-2x"style="color:yellow"></i>
})
else
if (week == 1)
{
    //
    <span class="fa-stack"><i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x"style="color:yellow;"></i><i class="fa fa-ban fa-2x fa-stack-2x"style="color:red;"></i></span>
}

```

But it doesn't quite work.

I get the icon but also a lot of text.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [12 June 2024 01:43 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/16 "2024-06-12T01:43:02Z")

</div>

Not sure of the exact mechanism for setting CSS Classes with Dashboard 2 (if that is what you are using). But in general all you need is 1 set of html:

```auto
        <span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
        </span>

```

And a css class:

```auto
.hidden {
  display: none;
}

```

Then just add the `hidden` class to the second `<i>`

```auto
        <span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i class="hidden fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
        </span>

```

With standard VueJS, you can make any attribute dynamic using `v-bind` or simply `:` as in:

```auto
        <span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i v-bind:class="somejsvariable" style="color:red;"></i>

```

Now you control the 2nd icon using a JavaScript variable that you set as a `data` variable in VueJS to make it responsive.

I think that's the way anyway, been a while since I used VueJS.

---

<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:** [12 June 2024 03:04 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/17 "2024-06-12T03:04:48Z")

</div>

I don't even what what `vueJS` is.

And I am using the original dashboard. Not the new `fuse` one.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [12 June 2024 14:50 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/18 "2024-06-12T14:50:35Z")

</div>

Ah, sorry, I made the wrong assumption. D2 uses the VueJS v3 front-end framework. D1 uses the AngularJS v1.

AnglularJS also has the ability to have dynamic attributes. I think you can just use mustaches inside the attribute value? Been a long time since I did anything serious with Anglular though I'm afraid.

Maybe:

```auto
        <span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i class="{{isHidden}} fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
        </span>

```

Where `isHidden` is a variable. (all untried I'm afraid).

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [12 June 2024 15:45 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/19 "2024-06-12T15:45:24Z")

</div>

> [@TotallyInformation](#):
>
> ` <i class="{{isHidden}} fa fa-ban`

or: ` <i ng-if="showBan" class="fa fa-ban`

and send a message with `showBan` true / false

---

<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:** [13 June 2024 06:35 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/20 "2024-06-13T06:35:02Z")

</div>

Thanks @Steve-Mcl and @TotallyInformation.

Alas I shall have to admit I am still not understanding.

Steve,  
I'm taking it that your `or` line continues on how Julian said - yes?

So I used two `inject` nodes.

`msg.showBan = true` and `msg.showBan = false`

Nothing happens.

Oh, the code - for clarity:

```auto
<span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i ng-if="showBan" class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
        </span>

```

[Next page](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592.md?page=2)