# Icon stacking problem

**URL:** <https://discourse.nodered.org/t/icon-stacking-problem/6127>\
**Category:** Dashboard\
**Created:** [26 December 2018 04:56 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127 "2018-12-26T04:56:08Z")\
**Posts on this page:** 18\
**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:** [26 December 2018 04:56 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/1 "2018-12-26T04:56:08Z")

</div>

Sorry folks,

I've done this before on another "icon" and it works, but now I am trying to do it again, A-N-D, it isn't playing nice.

This is the line in the node:

```auto
   msg = { payload: '<span class="fa-stack "><font color = "lime" i class="fa fa-2x fa-bullseye fa-stack-1x"></i><font color = "black" i class="fa fa-ban fa-stack-2x"></i></span>'}
return msg;

```

It is sort of annoying with that length line.  
Reading the Font Awsome web page ([font awsome - go down to stacking](https://fontawesome.com/v4.7.0/examples/) they show examples but I am missing something.

This is what I get on my screen when I do that code:  
(See inside red area)

 ![Screenshot%20from%202018-12-26%2015-49-54](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e19864026e0c42b4a10a9de8e44da073855252d8.png)

So, on the other web page, the code can be split onto multiple lines.  
I don't know how to do that in a function node.

No big, but that's the limit of what I know at this point.

Thanks.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [26 December 2018 09:15 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/2 "2018-12-26T09:15:11Z")

</div>

Look at the line you show and look at the ‘i’ and tell me what is wrong with it

---

<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:** [26 December 2018 09:32 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/3 "2018-12-26T09:32:33Z")

</div>

Yeah, I think I was missing a \< in it.

It should read:

```auto
   msg = { payload: '<span class="fa-stack "><font color = "lime" <i class="fa fa-bullseye fa-stack-2x"></i><font color = "black" <i class="fa fa-ban fa-stack-1x"></i><font color = "black" <i class="fa fa-ban fa-rotate-90 fa-stack-1x"></i></span>'}

```

Yes?

Been pulling my hair out on it.

Now I'm stuck with another STUPID problem.

Thanks.

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [26 December 2018 10:14 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/4 "2018-12-26T10:14:10Z")

</div>

use the developer tools in your browser which should list errors in the html.

---

<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:** [26 December 2018 10:18 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/5 "2018-12-26T10:18:58Z")

</div>

Thanks....

I am really tempted to do that.

But to me that just seems another "can of worms" I shall open.

I get that they are tools and will / SHOULD help me, and I am going to have to go through hard times to get to know them.

It is just as I see it I don't know anything about them either.

Yeah, ok, analogy:  
It's better to learn to use a hammer than push nails in with your hand.

But I fear I am going to do a lot of hitting my fingers with the hammer along the way.  
Sure it is part of learning, but I would like .....

Honestly: I don't know what I want. Brian is not working too good just now.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [26 December 2018 11:26 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/6 "2018-12-26T11:26:56Z")

</div>

Go back and review it again you correctly added the '\<' but what did you forget before it?

---

<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:** [26 December 2018 12:26 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/7 "2018-12-26T12:26:37Z")

</div>

Could it be:

```auto
msg = { payload: '<span class="fa-stack ">

```

The space after the af-stack and the closing of the " ?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [26 December 2018 14:31 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/8 "2018-12-26T14:31:29Z")

</div>

keep looking and remember each `<` has to have a closing `>`

---

<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:** [26 December 2018 16:47 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/9 "2018-12-26T16:47:01Z")

</div>

To cut to the chase... you have some `<` and `>` missing. Once they have been added back in it works perfectly.

You mentioned you don't like the long line. As this is a JavaScript String, you can break it up into multiple strings, each on its own line. As its Christmas, I've added in your missing `>` and closing `</font>` tags for you. If you compare this with what you had, I hope you'll see what was missing.

```auto
 msg = { payload: '<span class="fa-stack ">' +
                  '<font color = "lime"><i class="fa fa-2x fa-bullseye fa-stack-1x"></i></font>' +
                  '<font color = "black"><i class="fa fa-ban fa-stack-2x"></i></font>' +
                  '</span>'}
return msg;

```

---

<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:** [26 December 2018 21:29 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/10 "2018-12-26T21:29:42Z")

</div>

Thanks Nick for that.

(And zenofmud.)

A lot of that was (to me) last night.

I have since been to bed, slept and got up.

Ok, I found the missing \> in the line.

Please indulge me here because I'm confused with the story I saw happen (and just happen again) with this problem.

Let's start at "square 1":  
The original code:

```auto
   msg = { payload: '<span class="fa-stack "><font color = "lime" <i class="fa fa-bullseye fa-stack-2x"></i><font color = "black" <i class="fa fa-ban fa-stack-1x"></i><font color = "black" <i class="fa fa-ban fa-rotate-90 fa-stack-1x"></i></span>'}

```

And I will now drill down to the mentioned part/s:  
The missing \>

#1:

```auto
<i class="fa fa-bullseye

```

#2:

```auto
<i class="fa fa-ban

```

#3:

```auto
<i class="fa fa-ban fa-rotate-90

```

And to what was said:

> [@zenofmud](#):
>
> keep looking and remember each `<` has to have a closing `>`

Yeah, ok. That DID become an issue while I was looking at the line and adding all the extra stuff.

I won't upload the newer block of code because it is being re-written yet again with a better structre than I could muster last night.

But suffice to say it was working more than it wasn't.

Reading what was said, I added all the extra \> after the \<i and lone i I found.

Now it doesn't work at all.  
Now, when I send an input, rather than getting the icon, I get the text.  
But that's doing it how I read it should be:

ie:

```auto
    msg = { payload: '<span class="fa-stack "><font color = "lime" <i> class="fa fa-bullseye fa-stack-2x"></i><font color = "black" <i> class="fa fa-ban fa-stack-1x"></i><font color = "black" <i> class="fa fa-ban fa-rotate-90 fa-stack-1x"></i></span>'}

```

Stupidly I didn't keep the "better working" version, so I am now ....... going to have to look at it all again.

No problem.

As I said, I am re-writing the entire function block/node. Badly done last night with how it did things.

Now, Nick said:

> [@knolleary](#):
>
> I've added in your missing `>` and closing `</font>` tags for you.

But then I see:

```auto
<font color = "lime"><i class="fa fa-2x fa-bullseye

```

> [@zenofmud](#):
>
> keep looking and remember each `<` has to have a closing `>`

Sorry. I am now REALLY confused.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 December 2018 21:36 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/11 "2018-12-26T21:36:23Z")

</div>

> [@Trying\_to\_learn](#):
>
> \<i\> class="fa fa-bullseye fa-stack-2x"\>\</i\>

Compare that to the code that Nick posted.

> [@knolleary](#):
>
> \<i class="fa fa-2x fa-bullseye fa-stack-1x"\>\</i\>

Not the specific classes but the syntax. Look at every character. With computers the devil is in the detail.

---

<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:** [26 December 2018 21:42 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/12 "2018-12-26T21:42:31Z")

</div>

I have given you the exact answer. If what you have doesn't work, compare it to the working answer I've given you and spot the difference.

---

<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:** [26 December 2018 21:47 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/13 "2018-12-26T21:47:58Z")

</div>

Nick,

I am doing that.

I was MERELY pointing out my confusion.

Am working on it now.

Now that you have shown me how to split the lines, it is going to be a lot easier.

Thanks.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 December 2018 21:55 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/14 "2018-12-26T21:55:14Z")

</div>

I think, and correct me if I am wrong, that part of the problem may be that you don't understand what, for example,

```auto
<i class="fa fa-bullseye fa-stack-2x"></i>

```

actually means, but are just taking what others have supplied and attempting to tweak it to do what want. If I am right then please find a basic tutorial on html so that you understand the basic syntax. Having done that then if you see something like

```auto
<i> class="fa fa-bullseye fa-stack-2x"></i>

```

the fact that there is an error will immediately leap out and smack you in the face, so you will avoid typos of that and similar types.

Oh, and PLEASE stop dotting your posts with caps, it makes it disturbing to read. Thanks.

---

<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:** [26 December 2018 21:55 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/15 "2018-12-26T21:55:45Z")

</div>

> [@Trying\_to\_learn](#):
>
> I was MERELY pointing out my confusion.

It wasn't clear if you were still asking a question or not. Glad you got it working and hopefully you can see what was different in the working answer to what you had for the future.

---

<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:** [26 December 2018 21:58 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/16 "2018-12-26T21:58:34Z")

</div>

Colin.

Thanks.

May I ask what you mean by:  
dotting you posts with caps?

You are probably right with your guess of what is confusing me.

I am torn between "not reinventing the wheel" and doing it all myself.

I cut and paste as much as possible because I know that typos are problematic.  
So I do that to reduce the possibility of me making a typo.

Seems this is not the best solution.  
But I have to get through the learning part.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 December 2018 22:13 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/17 "2018-12-26T22:13:30Z")

</div>

> [@Trying\_to\_learn](#):
>
> May I ask what you mean by:  
> dotting you posts with caps?

Putting random words in capital letters, though actually in this thread these have not been as prevalent as in some of your posts. There really is no need for words in caps. If you want to emphasise something then italics are just as effective and not so disturbing to read. Though even italics should be used judiciously, otherwise wolves and shouting become relevant. This is all just my opinion of course, perhaps it is just me.

> [@Trying\_to\_learn](#):
>
> Seems this is not the best solution.  
> But I have to get through the learning part.

I agree, this technique is not the best. There is nothing wrong with cut and paste to benefit from input from others, but if you don't understand what you are cutting and pasting then there are likely to be problems. As I suggested, a day spent working through an html tutorial might be very beneficial.

---

<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:** [26 December 2018 22:19 UTC](https://discourse.nodered.org/t/icon-stacking-problem/6127/18 "2018-12-26T22:19:32Z")

</div>

Colin,

I think (hope) I am getting the "feel" (not in caps) for the forum better.

Though you call them random, I do it to highlight the word.

You say italics is better. I am maybe starting to agree, or use alternative methods.

I was not doing it to be disrespectful or upset anyone. It was merely the only/best way I know to single out the word of interest.

I have just recently joined another forum and fear/feel I am going to have a lot of settling in there to do as well.

Anyway, I shall get back to coding as I want to get this "idea" put to bed.  
Alas while doing this, another critter has arisen from the depths and I shall have to spend time tracking, trapping and resolving that problem too.