How do I use Font Awesome (4.7) with Nativescript (3.4.2) with Angular (5)

1
votes

Hopefully this is a simple question, but it has me stumped at the moment.

I am creating a Nativescript application for Android using an Angular 5/TS tabbed template, and am trying to integrate Font Awesome icons into the project. The problem is, every single icon shows up as what appears to be an envelope/placeholder instead of the actual icon. Is there something that I am missing that is required for this to work on Android? See the screenshots below.

enter image description here

Here's what I have gathered from various tutorials and guides online:

  • The ".ttf" font file needs to be in "../app/fonts/" folder.
  • A css class needs to be created with a font-family matching the font filename.
  • The css class needs to be applied to the desired tag in template file, and the text attribute needs to contain the unicode for the icon.
  • Most/all of the tutorials were using iOS instead of Android (I am using Android), and they had .css instead of .scss files. Does this have something to do with it?

Despite doing all of the above, I can't get this to work. Here is the setup I am trying:

enter image description here

enter image description here

enter image description here

The same thing seems to happen with just a plain old label: enter image description here

enter image description here

2
androidfont-awesomenativescriptangular5

2 Answers

1
votes

Use the standard FontAwesome.ttf instead of the web font variant. Using SCSS instead of CSS does not change anything - this NativeScreipt template is, in fact, implementing FontAwesome with SCSS.

The only difference is that the template uses not the -webfont but the FontAwesome.ttf and in the respective SCSS class the font is referred with its file name .fa { font-family: "FontAwesome" }

0
votes

Try this plugin which is helpful in using any / multiple font icons.

https://github.com/NathanWalker/nativescript-ngx-fonticon