Font Awesome 5 in Nativescript project


Has anyone been able to get Font Awesome 5 to work in their Nativescript project. When I copy the fontawesome.css file into assets I get this error:

Css styling failed: Error: undefined:1:16: missing ‘{’.

All I can do is remove the file an not use Font Awesome.

I am using Sass in my project. Do I need to use the sass files instead? I have tried copying the sass files into the assets folder as well and get the same error. If I remove the fontawesome css or sass files the error goes away.


Following the instructions for adding the FontAwesome *.ttf files didn’t work for me. I verified my code was calling the correct unicodes to load the icons, but no files were detected for that version. Downgrading to the single ttf file for 4.7 worked.


Hi @bradrice and @gdsimz, I finally updated Font Awesome 5 in my project. I copied the files fa-regular-400.ttf and fa-solid-900.ttf into my /fonts folder, then I added the classes:

.fa { 
    font-family: "Font Awesome 5 Free";

.fa-regular {
    font-family: "Font Awesome 5 Free Regular";

Those steps should be enough.

Happy coding…


Ah, thank you so much. That helps.


That is very helpful, but I am having trouble using both the solid and regular. If I remove the solid, then the regular icons appear, but if I put the solid .ttf file in fonts, it masks the regular. There must be a way to point a class specifically to the solid. Do you know how I do that?


I can’t seem to get both the regular and the solid to work on ios. I don’t think “Font Awesome 5 Free Regular” is the right name for the regular font. Do you have a solution for using them both? It works fine on Android.


Hi @bradrice, I have Font Awesome 5 working on all my projects, this is what I did. I copied the 3 ttf file into /fonts directory, Nativescript will be able to load them and the in your css file you should do something like this:

.fa {
    font-family: "Font Awesome 5 Free";

.fa-regular {
    font-family: "Font Awesome 5 Regular";

.fa-brands {
    font-family: "Font Awesome 5 Brands";

In the case of Android, you have to name the file same as the font name as I show in the image attached.

I hope it helps.



Thanks. For some reason it doesn’t work for me for ios. Only one of the fonts works, whichever one I name ‘Font Awesome 5 Free’ works. ‘Font Awesome 5 Regular’ does not work.


@bradrice - I have the same problem…in IOS all the icons are solid.

Any idea how to solve this?


I haven’t figured it out yet. It works great in Android because you can distinguish between the font families.