FontAwesome 5 and Nativescript

One of the libraries I always use when creating a new web application is Font Awesome, now in version 5. So I thought I could also use it with Nativescript, although it turned out to be a bit different than I expected.

There’s prenty of information on the web about how to use Icon Fonts with Nativescript, but everything that I found about using FontAwesome was some old FontAwesome 4 stuff and a plugin that was a little too complicated for me to implement.

So after some hours of testing I found an easy way to do this.

How to use FontAwesome 5 with Nativescript

First we need to download FontAwesome from their website. Go to the site, scroll down a little bit and press the Download Free button (at least you want to pay for it).

Then, open the zip file and go to fontawesome-free/web-fonts-with-css/webfonts and we will copy/move every .ttf file into the app/fonts folder inside our app (if the fonts folder doesn’t exist, we can create it).

Now we can add the fonts to our app.css like this:

That’s it, now we can use FontAwesome 5 in our app. To do that first, we have to find an icon. Go to the icon search page and then pick a icon. You need this two things:

The first one will be the class (fas) and the other one will be the code (f2b9).

Now we can insert the icon in our app template like this:

And that’s it! Now we can use FontAwesome 5 icons in our Nativescript app without using thirdparty plugins!

This examples were taken from my new app YAAAY! that you can download for free in the PlayStore. You can also see the code in Github if you need a simple Nativescript + Angular example.