How I got Fontawesome 5 working with my Angular Nativescript mobile app
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=''></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.
- Well ofcourse install the package.
- Download and extract the files from Fontawesome website to your computer: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
- Copy all the fontfiles (.eot, svg, woff, woff2) to /src/fonts/
- Open css/all.css from the extracted files and copy everything starting from where the comment lines starts something with
/* 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