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

2
votes

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.

3
nativescriptnativescript-angularfont-awesome-5

3 Answers

4
votes

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;
}
0
votes

Maybe this helps?

https://medium.com/@fransyozef/how-i-got-fontawesome-5-working-with-my-angular-nativescript-mobile-app-d7605930d7c9

I had also a lot of problems with FontAwesome 5, fixed it so decided to make a blog post out of it :)

0
votes

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