CODEWITHSUNDEEP
nativescriptfont-awesome
SwaX
SwaX

Reputation: 97

Font-Awesome doesnt work in NativeScript although i followed every step

The Icons I included in Nativescript dont work. I followed every Step in this tutorial but the Icons look like in the picture.

I tried using different versions of Font-Awesome. The Desktop and the web-version. I know that the Web-Version is the right one but you never know.

I Included Font-Awesome like this.

.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; 
}

And i used it like so:

<Label class="far" style="font-size: 50em; color: blue" text="&#xf130;"></Label>

Upvotes: 0

Views: 131

Answers (1)

Tim
Tim

Reputation: 222

For custom fonts, you need to add the font file in a folder src/fonts. Based on your picture, it's Android you are using, and on that platform, your CSS font-family must match the font file name, ie. FontAwesome if your font file is named FontAwesome.ttf. On iOS the font family must match the name in the font file - check out https://www.nativescript.org/blog/using-custom-fonts-in-a-nativescript-app for more details.

Edit: Maybe you are just missing quotes around the font (file) names,

ie.

.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', 'fa-solid-900';
}

I've created a Playground: https://play.nativescript.org/?template=play-ng&id=yUV2G5

and the three icons are displayed correctly on iOS.

Upvotes: 2

Related Questions