[IOS] : Font Awesome 5 PRO - Light icon always displayed as solid

[kefahB]

Hi,

On Android work as expected.

On IOSall Lighticon are dispalyed as solid

RESULT :

Css file located in app/fontawesome.css

In app.ts:

import {TNSFontIcon, fonticon} from 'nativescript-fonticon';

TNSFontIcon.debug = false;
TNSFontIcon.paths = {
  'fa': 'fontawesome.css'
};
TNSFontIcon.loadCss();

In app/fonts :

In app/_app-common.scss :

@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 300;
  src: url("~/fonts/fa-light-300.ttf") format("truetype")}

.fa {
  font-family: Font Awesome 5 Pro, fa-light-300;
  font-weight: 300;
}

@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 300;
  src: url("~/fonts/fa-solid-900.ttf") format("truetype")}

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

@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 400;
  src: url("~/fonts/fa-regular-400.ttf") format("truetype")}

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

Thank you :-)

[markosole]

Hi @kefahB it's been a long time since you reported this. Just wondering did you make it work eventually? I am having problem with Font 5 Pro, where all icons are displayed as squares on iOS, but Android works fine. I am using JS of NS.

UPDATE:
This actually works, I just had another app.ios.scss font definition and it overrides app_common.scss file.

[kefahB]

Hi @markosole, Yes I did .. you should add the css font-weight for each one to mak it work on IOS :

.fa {
  font-family: Font Awesome 5 Pro, fa-light-300;
  font-weight: 300;
}
.fas {
  font-family: Font Awesome 5 Pro, fa-solid-900;
  font-weight: 900;
}
.fab {
  font-family: Font Awesome 5 Pro, fa-brands-400;
  font-weight: 400;
}
.far {
  font-family: Font Awesome 5 Pro, fa-regular-400;
  font-weight: 400;
}
.fad {
  font-family: Font Awesome 5 Pro, fa-dutone-900;
  font-weight: 900;
}