1

I want to use Font Awesome 5 in my Nativescript-Angular app. I followed below article and did everything same but I always getting icon as "?" for iOS and "X" for android.

Nativescript Version - 6.5, Angular Version - 8.0

https://medium.com/alexonozor/fontawesome-5-and-nativescript-4-2-angular-ca29826f9346

Steps followed:-

  1. Downloaded Font-Awesome v5.1.15 from "https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself"
  2. A new folder created with name "fonts" in my application and kept it under src folder. Copied all ttf files inside newly created folder. Below is the screenshot:-

enter image description here

  1. Add lines in app.css and use font-awesome 5 in HTML as mentioned below:-

/*app.css*/
.far {
    font-family: Font Awesome 5 Free, "fa-regular-400";
    font-weight: 400;
}

.fab {
    font-family: Font Awesome 5 Brands, fa-brands-400;
    font-weight: 400;
}

.fas {
    font-family: Font Awesome 5 Free, fa-solid-900;
    font-weight: 900;
}
/*html*/
<Image src="font://&#xf51e;" stretch="none" class="fas"></Image>
<Label text="&#xf019;" class="far"></Label>
<Label text="&#xf39e;" class="fab"></Label>

It is not returning the actual image. If I follow the same steps in Nativescript Playground then it is working fine but I cant make it work in VS Code.

Please help me here.

rioV8
  • 24,506
  • 3
  • 32
  • 49
simple user
  • 349
  • 3
  • 22
  • 44

1 Answers1

2

Try to add double quote around the font names and filenames.

/*
File name: fa-solid-900.ttf
Font name: Font Awesome 5 Free
*/
.fas {
    font-family: "Font Awesome 5 Free", "fa-solid-900";
    font-weight: 900;
}

If it still does not work you should consider using the nativescript-fonticon located here. It makes it easier to use, same way as the Web way.

Mahamat GUIHINI
  • 131
  • 4