Font Awesome 5 in Nativescript project


#1

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.


#2

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.


#3

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…


#4

Ah, thank you so much. That helps.


#5

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?


#6

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.


#7

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.

font-awesome-5-ns


#8

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.


#9

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

Any idea how to solve this?


#10

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