# Simple show awesome icon on screen

**URL:** <https://discourse.nodered.org/t/simple-show-awesome-icon-on-screen/16847>\
**Category:** General\
**Created:** [18 October 2019 08:16 UTC](https://discourse.nodered.org/t/simple-show-awesome-icon-on-screen/16847 "2019-10-18T08:16:37Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![menno](https://avatars.discourse-cdn.com/v4/letter/m/dec6dc/32.png) [@menno](https://discourse.nodered.org/u/menno)\
**Post date:** [18 October 2019 08:16 UTC](https://discourse.nodered.org/t/simple-show-awesome-icon-on-screen/16847/1 "2019-10-18T08:16:37Z")

</div>

...am i stupid or not awake ????

i want to have a awesome font ( or icon ) on my screen, i puzzled but did find the correct way.

i just want a simple text box NOT A BUTTON !( in a template) that shows me a awesome font ( icon) doesn't matter which one. Played with and fa-xxxx and fa-2x .. but did not find any workable way.

can you please help me out here ? it cant be that hard ??  
many thanks in advance  
m

---

<div class="post-metadata">

**Author:** ![softy2k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/softy2k/32/23707_2.png) [@softy2k](https://discourse.nodered.org/u/softy2k)\
**Post date:** [18 October 2019 08:55 UTC](https://discourse.nodered.org/t/simple-show-awesome-icon-on-screen/16847/2 "2019-10-18T08:55:18Z")

</div>

In text, at Label : `<font color = "black" i class="fa fa-barcode fa-2x"> </i><font size=5 font color ="blue"> Scan`

---

<div class="post-metadata">

**Author:** ![menno](https://avatars.discourse-cdn.com/v4/letter/m/dec6dc/32.png) [@menno](https://discourse.nodered.org/u/menno)\
**Post date:** [18 October 2019 09:04 UTC](https://discourse.nodered.org/t/simple-show-awesome-icon-on-screen/16847/3 "2019-10-18T09:04:51Z")

</div>

thx this worked .. i can now play around  
many many thanks

---

<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:** [18 October 2019 09:30 UTC](https://discourse.nodered.org/t/simple-show-awesome-icon-on-screen/16847/4 "2019-10-18T09:30:27Z")

</div>

That is some pretty screwed up mismatched html

```auto
<font color = "black" i class="fa fa-barcode fa-2x"> </i><font size=5 font color ="blue"> Scan

```

...where on earth did you copy that from haha. Browsers are so forgiving.

This is more sensible...

```auto
<span style="color:black;"> <i class="fa fa-barcode fa-2x"> scan</i></span>

```

Or simply let the font colour be inherited...

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

```

Edit...  
I haven't tried this so YMMV.

You might need to take the text outside of the `<i>` tag

@menno I would NOT use that html snippet - it has 2 unclosed font tags. God knows what quirks will surface across the rest of your dashboard.

Most html `<tags>` require an equal close `</tag>` and the random `i` makes no sense (but I do know where it's from - font-awsome is almost always demonstrated using the `<i>` tag

---

<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:** [18 October 2019 14:01 UTC](https://discourse.nodered.org/t/simple-show-awesome-icon-on-screen/16847/5 "2019-10-18T14:01:44Z")

</div>

The `ui_template` node will likely strip off any `style` attributes it sees because that's just what Angular likes to do. This is why the `<font>` tag is commonly used rather than `<span>`.

So the fixed html will be:

```auto
<font color="black"><i class="fa fa-barcode fa-2x"></i></font><font size=5 color="blue">Scan</font>

```

---

<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:** [18 October 2019 14:20 UTC](https://discourse.nodered.org/t/simple-show-awesome-icon-on-screen/16847/6 "2019-10-18T14:20:59Z")

</div>

Thanks for the info Nick. I wasn't aware of this.

---

<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:** [18 October 2019 17:46 UTC](https://discourse.nodered.org/t/simple-show-awesome-icon-on-screen/16847/7 "2019-10-18T17:46:15Z")

</div>

You should be able to use the Angular equivalents.

There is an example here:

> **[Node-RED Dashboard Template Examples (AngularJS)](https://it.knightnet.org.uk/kb/nr-qa/dashboard-template-examples/#a-couple-of-ways-to-send-a-msg-back-to-node-red)**
>
> Some examples of using AngularJS with the Node-RED Dashboard.
> Not all features of Angular are accessible via the Dashboard.