Trouble setting up Font Awesome 5 with iPhone

[fransyozef]

I'm trying to get Font Awesome 5 to work on iphone but it's not working.

My folder structure

• src -- assets -- fonts -- app

The assets folder contains the fontawesome css (font-awesome.css), I've removed everything above the "Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons" remark.

The fonts folder contains all the fontfiles (eot / svg / ttf / woff / woff2) I've downloaded from Font Awesome 5 website (fa-brands / fa-regular / fa-solid)

In my main scss file I have a line :

.fa {
    font-family: FontAwesome, fontawesome-webfont;
}

.fas {
    font-family: FontAwesome, fa-solid-900;
}

In my app.module.ts :

import { TNSFontIconModule , TNSFontIconService } from 'nativescript-ngx-fonticon';
TNSFontIconService.debug = true;

and import :

    TNSFontIconModule.forRoot({
        'fa': './assets/font-awesome.css'
    })

Now in my HTML:

<Label class="fas" [text]="'fa-bars' | fonticon" color="#2c0239"></Label>

I've also modified my webpack config to copy and watch the src/assets/ folder:

            new CopyWebpackPlugin([
                { from: "assets/**"},
                { from: "fonts/**" },
                { from: "**/*.jpg" },
                { from: "**/*.png" },
            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),

So when I run this on my iPhone I get [?]

[fransyozef]

Finally have it :

    .fas {
        font-family: "Font Awesome 5 Free", fa-solid-900;
    }

The first one ("Font Awesome 5 Free") is needed for iPhone and fa-solid-900 is needed for Android.