Nativescript-vue Font Icon - Image Tag

0
votes

I have read the following code from nativescript core documentation.

<Image src="font://&#xf51e;" stretch="none" class="fas"></Image>

I want to use Image tag for displaying icons, but when i tried the previous code with NATIVESCRIPT-VUE, nothing appears.

My Code is the following:

<Label text="hola" textWrap="true" />
<Label class="fas" style="font-size: 50em; color: red" text.decode="&#xf7aa;" />
<Label class="fas" style="font-size: 50em; color: blue" text.decode="&#xf51e;" />
<Label class="far" style="font-size: 50em; color: orange" text.decode="&#xf2bb;" />
<Label class="fab" style="font-size: 50em; color: black" text.decode="&#xf2b3;" />
<Image src="font://&#xf51e;" stretch="none" class="fas"></Image>

The icons with the label tag, works perfect. However, the Image tag with icon does not work.

Documentation Link : Here

Here is my project structure

enter image description here

PlayGround Sample: Link

1
nativescriptnativescript-vue
It works perfectly fine on my end, please make sure you have copied the font to your fonts folder. If you still have issues, please share a Playground sample. - Manoj
Are you using nativescript-vue? It works fine in nativescript core - Juan Bonoso
I just add the palyground sample - Juan Bonoso

1 Answers

2
votes

You were missing the CSS definition for fas

.fas {
    font-family: "Font Awesome 5 Free", "fa-solid-900";
    font-weight: 900;
}

It works!

<Label class="fas" style="font-size: 50em; color: red"
                text.decode="&#xf7aa;" />
<Image src.decode="font://&#xf7aa;" stretch="none"
                class="fas">

Updated Playground