Simple show awesome icon on screen

General
1

...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

2

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

3

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

4

That is some pretty screwed up mismatched html

<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...

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

Or simply let the font colour be inherited...

<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

5

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:

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

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

7

You should be able to use the Angular equivalents.

There is an example here:

1 Like