Using fa-icon in template node

Dashboard
1

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
2
  1. https://fontawesome.com/v4.7.0/
3

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?

4

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) directly in the ui_template node.

5

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

1 Like
6

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
The font awesome library https://fontawesome.com/cheatsheet*

<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

1 Like
7

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

Ps, welcome to the forum. :slight_smile:

1 Like
8

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 :slightly_smiling_face:

2 Likes