How I got Fontawesome 5 working with my Angular Nativescript mobile app

The Hangry Coder
2 min readDec 7, 2018

--

I love fontawesome. Fontawesome is a webfont with a set of icons. Main advantages are

  • scalable (it’s a font)
  • their icons are state of the art
  • free (they do have a paid webfont

For those who are familiar with Bootstrap, you already know about Fontawesome. These 2 mix well. Before Fontawesome 5, the files and structure where simple. But now with Fontawesome 5, the makers decided to split the icons and also the css files etc.

Nativescript mobile app

Before I created apps with Nativescript, I used IONIC and yes I also used Fontawesome. So when I started with Nativescript, I also wanted to have Fontawesome. But this time I needed to use version 5.

Not so Unicode

When I started, I came into this forum post : https://discourse.nativescript.org/t/getting-font-awesome-v-5-0-to-work/5656

Now this worked for ios, but failed with Android (maybe my test device is to old). The reason was unicode. So for example

<Label class="fa" text='&#xf2b9;'></Label>

rendered a question mark on my Android device.

Using FontIcon

Then I stumbled uppon this package: https://github.com/NathanWalker/nativescript-fonticon

The advantages of using this package:

  • you can use other fonticons aswell
  • using the old way notation of Fontawesome (not using the unicod)

But there are some steps you need to do in order to get it run perfect.

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */

and save it in /src/assets/fontawesome.css (you can ofcourse choose a different location and name).

  • Open your app.module.ts to add the package and configure it:
  • add the Fontawesome classes in your main css file:
  • Now you can use it in your template, for example:

I used this home icon: https://fontawesome.com/icons/home?style=solid

--

--