# Using fa-icon in template node

**URL:** https://discourse.nodered.org/t/using-fa-icon-in-template-node/6767
**Category:** Dashboard
**Created:** [13 January 2019 22:18 UTC](https://discourse.nodered.org/t/using-fa-icon-in-template-node/6767 "2019-01-13T22:18:35Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![cpaolojo](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@cpaolojo](https://discourse.nodered.org/u/cpaolojo)
#### Post date: [13 January 2019 22:18 UTC](https://discourse.nodered.org/t/using-fa-icon-in-template-node/6767/1 "2019-01-13T22:18:35Z")

</div>

hi all.  
I would use some fa-icons in my template node but I have 2 Problems:

- where could I find the complete list of the fa-icon?
- could you show me an example of template node code wich uses fa-icon?  
thanks a lot  
Paolo

---

<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: [13 January 2019 22:24 UTC](https://discourse.nodered.org/t/using-fa-icon-in-template-node/6767/2 "2019-01-13T22:24:16Z")

</div>

1. [https://fontawesome.com/v4.7.0/](https://fontawesome.com/v4.7.0/)

---

<div class="post-metadata">

### Author: ![cpaolojo](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@cpaolojo](https://discourse.nodered.org/u/cpaolojo)
#### Post date: [13 January 2019 22:37 UTC](https://discourse.nodered.org/t/using-fa-icon-in-template-node/6767/3 "2019-01-13T22:37:34Z")

</div>

thanks a lot!  
sorry but I have no experience about the plate node.  
could you do me an example about the code which uses a fa-icons in the template node?

---

<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: [13 January 2019 22:54 UTC](https://discourse.nodered.org/t/using-fa-icon-in-template-node/6767/4 "2019-01-13T22:54:33Z")

</div>

Hi @cpaolojo

I'm assuming you're using the `ui_template` node as you're asking this in the #dashboard category.

The Node-RED Dashboard already has Font Awesome loaded, so to use an FA icon, you can use the HTML from the examples they provide ([https://fontawesome.com/v4.7.0/examples/#basic](https://fontawesome.com/v4.7.0/examples/#basic)) directly in the ui\_template node.

---

<div class="post-metadata">

### Author: ![cpaolojo](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@cpaolojo](https://discourse.nodered.org/u/cpaolojo)
#### Post date: [14 January 2019 22:55 UTC](https://discourse.nodered.org/t/using-fa-icon-in-template-node/6767/5 "2019-01-14T22:55:29Z")

</div>

Yes, I'm using `ui_template` node.  
Sorry but I have no experience about.  
I would add an icon to my button (in the left side of the button):

```
 <md-button class="md-accent md-raised" style="background-color:white" ng-click="send({payload:'hide_done'})"> 
 <svg width="300" height="100">
   <style>
     /* il colore è definito da "fill" */
.small { font: 20px sans-serif; fill: black; text-transform: lowercase}
.heavy { font: bold 30px sans-serif; fill: black; text-transform: uppercase }
.Rrrrr { font: italic 40px serif; fill: black; text-transform: none }
   </style>
   <text x="20" y="35" class="small">El</text>
   <text x="40" y="35" class="heavy">me</text>
   <text x="55" y="55" class="small">compare/text><
   <text x="65" y="55" class="Rrrrr">giacometo</text>
 </svg>
 </md-button>

```

Could you help me by adding the part of code which manages the icon?  
Thanks a lot  
Paolo

---

<div class="post-metadata">

### Author: ![richcole26](https://avatars.discourse-cdn.com/v4/letter/r/e68b1a/32.png) [@richcole26](https://discourse.nodered.org/u/richcole26)
#### Post date: [22 December 2020 16:48 UTC](https://discourse.nodered.org/t/using-fa-icon-in-template-node/6767/6 "2020-12-22T16:48:17Z")

</div>

Hello

I have modified your code so that puts a font awesome camera icon to the left hand side of the button.  
The position of the icon can be adjusted by altering the relative values using right, left, top, bottom.  
reference [https://www.w3schools.com/css/css\_positioning.asp](https://www.w3schools.com/css/css_positioning.asp)  
The font awesome library [https://fontawesome.com/cheatsheet\*](https://fontawesome.com/cheatsheet)

```auto
<md-button class="md-accent md-raised" style="background-color:white" ng-click="send({payload:'hide_done'})"> 

  <style>
     /* il colore è definito da "fill" */
.nr-dashboard-template .md-button {height: 100%; width:100%; color black}
.small { font: 20px sans-serif; fill: black; text-transform: lowercase}
.heavy { font: bold 30px sans-serif; fill: black; text-transform: uppercase }
.Rrrrr { font: italic 40px serif; fill: black; text-transform: none }

   </style>
   
<i class="fa fa-camera-retro fa-5x" style="color: black; position: relative; right: 45px"></i>
<text class="Rrrrr" style="color: black">Camera</text>

 </md-button>
 

    

```

Hope this helps

---

<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: [22 December 2020 17:32 UTC](https://discourse.nodered.org/t/using-fa-icon-in-template-node/6767/7 "2020-12-22T17:32:12Z")

</div>

Hi @richcole26 good stuff, but  
did you realise this thread is 2 years old?

Ps, welcome to the forum. 🙂

---

<div class="post-metadata">

### Author: ![richcole26](https://avatars.discourse-cdn.com/v4/letter/r/e68b1a/32.png) [@richcole26](https://discourse.nodered.org/u/richcole26)
#### Post date: [22 December 2020 20:13 UTC](https://discourse.nodered.org/t/using-fa-icon-in-template-node/6767/8 "2020-12-22T20:13:06Z")

</div>

Hi, no I didn't realise was just browsing and came across it. Like the forum has been very helpful as im still fairly new to all this 🙂