how to add custom Icons fonts on nativescript - nativescript

Question

I am trying to use Icon Fonts on my NativeScript app.
So I followed the oficial documentation and those were my steps:
(1) - Downloaded the ttf files into my app/fonts folder:
(2) - On my app.css I declared the font global class like so:
.fa {
font-family: "Font Awesome 5 Free", "fa-regular-400", "fa-solid-
900";
}
.fa-solid {
font-family: "Font Awesome 5 Free", "fa-solid-900";
}
(3) - Then on my html component:
<Label text="" class="far"></Label>
But My Icon does not appear on the screen. I am using NativeScript 6+ with Angular 8.
Any Help ?

Answer 1

I figure it out why the Font Icons wasn't showing up!
I was using NativeScript 5.1 and since version 6.0 was released I migrated the project:
tns migrate
The problem is that I was using NS with Angular 8 and according to the docs I have to place my fonts on the project's root folder.
In your root application folder (This is the app folder for NativeScript Core, and the src folder for Angular 6+), create a folder called fonts and place the .ttf there.
So, Clearly the problem was that my fonts folder was inside /app when it should be inside /src folder.
It took me too long to realize that because for some strange reason my imported text fonts like 'Montserrat.tff' was working just fine. So I thought the problem was related with NativeScript or whatever.
In short, the Wrong way to do it with NativeScript and Angular 6+:
The right way:
I hope this helps newcomers who may stumble in the same problem/situation.