Nativescript: Icon fonts broken / not working question mark in a box being displayed

[Positivism]

Environment
ng version
Angular CLI: 7.0.6
Node: 8.11.0
OS: darwin x64
Angular: 7.1.4

tns info
✔ Getting NativeScript components versions information...
✔ Component nativescript has 5.1.0 version and is up to date.
✔ Component tns-core-modules has 5.1.1 version and is up to date.
✔ Component tns-android has 5.1.0 version and is up to date.
✔ Component tns-ios has 5.1.0 version and is up to date.

Describe the bug
Icon fonts are not displaying, instead of displaying the mapped icon they display a questionmark in a box.

To Reproduce

app.css

.far {
    font-family: Font Awesome 5 Free, fa-regular-400;
    font-weight: 400; 
}

.fab {
    font-family: Font Awesome 5 Brands, fa-brands-400;
    font-weight: 400; 
}

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

app.component.html

<StackLayout>
    <Label class="far" text="&#xf0e0;"></Label>
</StackLayout>

app/src/fonts/

fa-regular-400.ttf
fa-solid-900.ttf
fa-brands-400.ttf

Expected behavior
Icon displays.

Sample project
Now this is where it gets odd.
When I do a playground recreation the icon displays properly.
Playground Recreation

Here is a real recreation of the playground with it not working.
src.zip

package.json

{
    "nativescript": {
        "id": "org.nativescript.testlatesticon",
        "tns-android": {
            "version": "5.1.0"
        },
        "tns-ios": {
            "version": "5.1.0"
        }
    },
    "description": "NativeScript Application",
    "license": "SEE LICENSE IN <your-license-filename>",
    "repository": "<fill-your-repository-here>",
    "dependencies": {
        "@angular/animations": "~7.1.0",
        "@angular/common": "~7.1.0",
        "@angular/compiler": "~7.1.0",
        "@angular/core": "~7.1.0",
        "@angular/forms": "~7.1.0",
        "@angular/http": "~7.1.0",
        "@angular/platform-browser": "~7.1.0",
        "@angular/platform-browser-dynamic": "~7.1.0",
        "@angular/router": "~7.1.0",
        "nativescript-angular": "~7.1.0",
        "nativescript-theme-core": "~1.0.4",
        "reflect-metadata": "~0.1.8",
        "rxjs": "~6.3.0",
        "tns-core-modules": "~5.1.0",
        "zone.js": "^0.8.26"
    },
    "devDependencies": {
        "@nativescript/schematics": "~0.4.0",
        "nativescript-dev-typescript": "~0.7.0",
        "nativescript-dev-webpack": "~0.18.0",
        "@angular/compiler-cli": "~7.1.0",
        "@ngtools/webpack": "~7.1.0"
    },
    "readme": "NativeScript Application"
}

Additional context
Running IOS 12.1.2

[tsonevn]

Hi @Positivism,
Thank you for the attached project.
I reviewed it and found that this issue is happening on your side because the fonts folder is not positioned in the root src folder. To fix the issue, you should only move the src/app/fonts folder to src/fonts. Check out the attached project.
testFonts.zip

Note: the Playground is still using the old NativeScript Angular project structure, where the app folder is the root source container.

[Positivism]

When competent developers make the most trivial mistakes it's always fun. Thank you @tsonevn, while I'm here should the images folder be in src/images instead of src/app/images as well? I believe I've been referencing src as ~/app/images/reference

[tsonevn]

Hi @Positivism,
In my opinion, if you are referencing the images path as ~/app/images/reference, you can keep the images folder inside src/app/. If you move it one level up(inside the src folder), you will need to change the path for all images, that are already added in the app.

[Positivism]

Thank you @tsonevn

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.