Odtnhj

I'm trying to get Font Awesome 5 to work on android but it's not working. Using the https://github.com/NathanWalker/nativescript-ngx-fonticon package.

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 [?]

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.

This is how I did it because that didn't worked for me.

I'm using Nativescript and VueJs

Version of Font Awesome: 5.4.2

You will need to following fonts:

fa-regular-400
fa-brands-400
fa-solid-900

You need to place them app>fonts

Add this to app>app.css

.far 
 font-family: 'Font Awesome 5 Free', fa-regular-400;
 font-size: 40em;


.fab 
 font-family: 'Font Awesome 5 Brands', fa-brands-400;
 font-size: 40em;


.fas 
 font-family: 'Font Awesome 5 Free', fa-solid-900;
 font-size: 40em;

You can change the font-size.

So how to use in the template?

A few examples:

<Label class="fab" :text="'uf060' | unescape"></Label>
<Label class="fab" :text="'uf170' | unescape"></Label>
<Label class="fab" :text="'uf36e' | unescape"></Label>

filters: 
 unescape: v => unescape(v)
 

If you search an icon you will see the unicode.
You need to copy that.

Example the Unicode for moon is f186

So to use it you will need to typ uunicode => uf186

it will only work if use the attribute :text and the function unescape.

Multi line buttons

 <Button class="btn">
 <FormattedString>
 <span class="fas" :text="'u[ICONCODE]' | unescape" ></span>
 <span :text="'n [TEXT]' | unescape" ></span>
 </FormattedString>
 </Button>

 filters: 
 unescape: v => unescape(v)