CODEWITHSUNDEEP
nativescriptfont-awesome-5angular-nativescriptangular-fontawesome
simple user
simple user

Reputation: 383

How to use Font Awesome 5 in Nativescript Angular application?

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.

Upvotes: 1

Views: 1641

Answers (1)

Mahamat GUIHINI
Mahamat GUIHINI

Reputation: 141

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.

Upvotes: 2

Related Questions