Font does not show up (Awessome 4.7)

[RiddlerKnight]

I have set my project following these steps

1. create fonts folder in path "/myproject/src/app/fonts" and put "fontawesome-webfont.ttf" inside this folder
2. I copied font-awesome.css that I downloaded from official website and put it in this path "/myproject/src/app/css"

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
import { TNSFontIconModule } from "nativescript-ngx-fonticon";

import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        AppRoutingModule,
        NativeScriptModule,
        TNSFontIconModule.forRoot({
            "fa":"./css/font-awesome.css"
        }),
        NativeScriptUISideDrawerModule
    ],
    declarations: [
        AppComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

then, I have injected "_fontIconService:TNSFontIconService" inside app.component.ts and add "TNSFontIconModule" into child module.

I separated heading-bar as heading-bar component and put this code.

<RadSideDrawer [drawerTransition]="sideDrawerTransition">
    <GridLayout tkDrawerContent rows="auto, *" class="sidedrawer sidedrawer-left">
        <StackLayout row="0" class="sidedrawer-header">
            <Label class="sidedrawer-header-image fa"></Label>
            <Label class="sidedrawer-header-brand" text="User Name"></Label>
            <Label class="footnote" text="username@mail.com"></Label>
        </StackLayout>
        <ScrollView row="1">
            <StackLayout class="sidedrawer-content">
                <GridLayout columns="auto, *" class="sidedrawer-list-item">
                    <Label col="0" [text]="'fa-home' | fonticon" class="fa"></Label>
                    <Label col="1" text="Home" class="p-r-10"></Label>
                </GridLayout>

                <GridLayout columns="auto, *" class="sidedrawer-list-item">
                    <Label col="0" [text]="'fa-globe' | fonticon" class="fa"></Label>
                    <Label col="1" text="Browse" class="p-r-10"></Label>
                </GridLayout>
            </StackLayout>
        </ScrollView>
    </GridLayout>
    <page-router-outlet tkMainContent></page-router-outlet>
</RadSideDrawer>

I have re-compiled this project and it shown like this. https://www.imgtrue.com/image/2019-01-11-19-12-07.U8O3ic

I do try to check filename and all code, so it dose't work

[RiddlerKnight]

I try to put them as unicode form like this

<GridLayout rows="auto,auto">
    <ns-heading-bar row="0"></ns-heading-bar>
    <GridLayout row="1">
        <StackLayout>
            <Label text="&#xf2be; &#xf090; &#xf2ba;" class="PageSubject"></Label>
        </StackLayout>
    </GridLayout>
</GridLayout>

.PageSubject{
    font-family: FontAwesome;
    font-size: 60;
}

This is the result. https://www.imgtrue.com/image/2019-01-11-22-24-26.U8tczO

[RiddlerKnight]

I solve this issue. It is my fault. The problem is Android relies on file name and iOS is on the font family name.