# More then one icon in UI

**URL:** <https://discourse.nodered.org/t/more-then-one-icon-in-ui/76167>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, ui-widgets\
**Created:** [6 March 2023 08:27 UTC](https://discourse.nodered.org/t/more-then-one-icon-in-ui/76167 "2023-03-06T08:27:57Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![DeWoAlliSeged7](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dewoalliseged7/32/58702_2.png) [@DeWoAlliSeged7](https://discourse.nodered.org/u/DeWoAlliSeged7)\
**Post date:** [6 March 2023 08:27 UTC](https://discourse.nodered.org/t/more-then-one-icon-in-ui/76167/1 "2023-03-06T08:27:57Z")

</div>

Hello

I like to give a button multiple icons.  
In fact i like to make three question marks in different colors.

```auto
> class="fas fa-question fa-2x"></i>i class="fas fa-question fa-2x"></i>i class="fas fa-question fa-2x"></i>

```

Don't work ;(

---

<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:** [6 March 2023 08:32 UTC](https://discourse.nodered.org/t/more-then-one-icon-in-ui/76167/2 "2023-03-06T08:32:13Z")

</div>

Try...

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

```

Node-red is don't awesome 4.7 so `fas` icons aren't available.

---

<div class="post-metadata">

**Author:** ![DeWoAlliSeged7](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dewoalliseged7/32/58702_2.png) [@DeWoAlliSeged7](https://discourse.nodered.org/u/DeWoAlliSeged7)\
**Post date:** [6 March 2023 08:34 UTC](https://discourse.nodered.org/t/more-then-one-icon-in-ui/76167/3 "2023-03-06T08:34:51Z")

</div>

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

What am I doing wrong ?

---

<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:** [6 March 2023 08:40 UTC](https://discourse.nodered.org/t/more-then-one-icon-in-ui/76167/4 "2023-03-06T08:40:21Z")

</div>

Nothing wrong as far as I can see from that screenshot.

Just to be sure, you do realise that part of a node-red node is for documenting a node on the sidebar right?

---

<div class="post-metadata">

**Author:** ![DeWoAlliSeged7](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dewoalliseged7/32/58702_2.png) [@DeWoAlliSeged7](https://discourse.nodered.org/u/DeWoAlliSeged7)\
**Post date:** [6 March 2023 08:47 UTC](https://discourse.nodered.org/t/more-then-one-icon-in-ui/76167/5 "2023-03-06T08:47:19Z")

</div>

I think i put it in the right spot.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/e/1e0ebca42f3dab7d0d00f45ca79f2865eded4423.png)this ist the button with the icons! but in the UI the won't be shown ;(

---

<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:** [6 March 2023 08:51 UTC](https://discourse.nodered.org/t/more-then-one-icon-in-ui/76167/6 "2023-03-06T08:51:17Z")

</div>

You didn't specify a button. You wrote 3 `i` elements.

Can you explain exactly what you are trying to achieve? Do you really want a button to be displayed in the sidebar? Or are you trying to add a button to a dashboard UI?

---

<div class="post-metadata">

**Author:** ![DeWoAlliSeged7](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dewoalliseged7/32/58702_2.png) [@DeWoAlliSeged7](https://discourse.nodered.org/u/DeWoAlliSeged7)\
**Post date:** [6 March 2023 08:53 UTC](https://discourse.nodered.org/t/more-then-one-icon-in-ui/76167/7 "2023-03-06T08:53:55Z")

</div>

Im sry  
Yes i would like to show it in a button in the UI.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/c/dc2a711c69d15d19facd1dc968bcf56eacfa8e37.png)  
In here i would like three question marks with different colores.

---

<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:** [6 March 2023 09:55 UTC](https://discourse.nodered.org/t/more-then-one-icon-in-ui/76167/8 "2023-03-06T09:55:08Z")

</div>

Then why don't you simply add a ui-button node?

---

<div class="post-metadata">

**Author:** ![DeWoAlliSeged7](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dewoalliseged7/32/58702_2.png) [@DeWoAlliSeged7](https://discourse.nodered.org/u/DeWoAlliSeged7)\
**Post date:** [6 March 2023 09:59 UTC](https://discourse.nodered.org/t/more-then-one-icon-in-ui/76167/9 "2023-03-06T09:59:47Z")

</div>

How do i do it with different colors ?  
sry I am a beginner 😉

---

<div class="post-metadata">

**Author:** ![mudwalker](https://avatars.discourse-cdn.com/v4/letter/m/47e85d/32.png) [@mudwalker](https://discourse.nodered.org/u/mudwalker)\
**Post date:** [6 March 2023 10:30 UTC](https://discourse.nodered.org/t/more-then-one-icon-in-ui/76167/10 "2023-03-06T10:30:06Z")

</div>

@DeWoAlliSeged7

Have you seen this playlist: [Node-RED Essentials](https://www.youtube.com/playlist?list=PLyNBB9VCLmo1hyO-4fIZ08gqFcXBkHy-6). The videos are done by the developers of node-red. They're nice & short and to the point. You will understand a whole lot more in about 1 hour. A small investment for a lot of gain.

---

<div class="post-metadata">

**Author:** ![mudwalker](https://avatars.discourse-cdn.com/v4/letter/m/47e85d/32.png) [@mudwalker](https://discourse.nodered.org/u/mudwalker)\
**Post date:** [6 March 2023 10:37 UTC](https://discourse.nodered.org/t/more-then-one-icon-in-ui/76167/11 "2023-03-06T10:37:27Z")

</div>

That, along with the help tab in the right hand sidebar should get you on your way.

 ![2023-03-06_10-34](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2f3a9e96bdda55f3df06c1a972a406bc6a94f3fc.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 April 2023 10:38 UTC](https://discourse.nodered.org/t/more-then-one-icon-in-ui/76167/12 "2023-04-05T10:38:10Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.