FontAwesome 5 and NativeScript 4.2 [Angular]

FontAwesome is an awesome library for adding icons to a web, mobile, and desktop applications. hay!! it now in version 5, with a whole lot of beautiful icons that may fit the need of your application. So I thought I could also use it with NativeScript 4.2(latest) + Angular 6, although it turned out to be a bit different than I expected.

There are a lot of articles and tutorials that show how to use FontAwesome and NativeScript but since the release of FontAwsome 5 and NativeScript 4.2 + Angular things have really changed from both ends and none of those old methods will work if you are using this new stable version.

How to use FontAwesome 5 with NativeScript 4.2 + Angular

First, we need to download FontAwesome from their website. Go to the site, navigate to how to use then scroll to the host it yourself section, click download FontAwesome for free, you can choose to pay for it.

After downloading, here is where things become tricky from your NativeScript-Angular, The new NTS-ng file structure has changed since the release of 4.2. the app directory has been moved to the /src directory as you would expect in every angular-cli 2+ project. So let’s create a /fonts folder inside the /src directory like this:

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 src/fonts folder.

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 an icon. You need this two things:

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

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 4.2 Angular app without using third-party plugins!

Thanks for your time reading and do not forget to clap if you like it so others can benefit.

Alex Onozor
Frontend(web & mobile), JavaScriptor(Lover of Angular ≤=> Angular Lover), Web evangelist. Open source contributor. Software Architect.