CODEWITHSUNDEEP
nativescriptnativescript-angularfont-awesome-5
Vijay Kumar
Vijay Kumar

Reputation: 35

NativeScript FontAwesome 5 free version overwrites regular font by solid font in iOS

Trying to use the below font to show user icon using FontAwesome 5 in Nativescript, the user icon with regular view is loading correctly in Android.

But in iOS version the icon is overwritten with Solid font.

<Label class="page-icon far" text="&#xf007;"></Label>

when I try to remove the solid font from Fonts folder, it is working.

Upvotes: 2

Views: 1295

Answers (2)

rynop
rynop

Reputation: 53559

The problem is Font Awesome uses the SAME Family name for the Solid and Regular collections. The .ttf files differentiate collections based on Style, which is not supported in CSS.

The solution is to rename the Family of one of the collections - I choose solid.

I wrote an in depth blog post, but the gist is:

  1. Copy .ttf files into your fonts dir
  2. Use fontname.py (or similar tool) to rename the Family attribute:

python fontname.py "Font Awesome 5 Free Solid" fa-solid-900.ttf

You can then specify the following in your css:

.far {
    font-family: 'Font Awesome 5 Free', fa-regular-400;
}

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

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

Upvotes: 4

D C
D C

Reputation: 728

Font Awesome 5 add in nativescript Angular in Android and ios use 

.fa {
    font-family: "FontAwesome";
}

app.android.css enter image description here app.ios.css enter image description here app/fonts download enter image description here

Upvotes: 0

Related Questions