Use Font Awesome Glyph Icons With NativeScript

If you’re like me, you’re terrible when it comes to design and that includes graphic design. Creating icons throughout an app can be a rough process, not just from a creativity perspective, but also from the perspective of displaying these icons on various screen sizes and resolutions. Web developers have it easy with the incredibly useful Font Awesome glyph icon package. The thing is, it isn’t just web developers that can make use of Font Awesome.

It is very easy to include Font Awesome in your Telerik NativeScript mobile application. I already demonstrated using these glyph icons in an Ionic Framework, React Native, and even a native Android application. Now it’s time to do it with NativeScript.

I was inspired to write this article after reading a similar post on the NativeScript blog. I wanted to take it further to fill any holes in how to do this.

Before we jump into some code, let’s look at why using fonts is a good idea in an application.

Let’s say you have a mobile application that uses twenty (20) different glyph icons. Android alone has many different device resolutions and requires a different icon size for each. For example each icon would need a different size for mdpi, hdpi, xhdpi, xxhdpi, and xxxhdpi screens. Not only is it a pain to have to generate all these icons, but it adds a lot of girth to your binary file size.

When you use fonts, you can include one ~100kb font file into your project that contains hundreds of icons. These icons will automatically scale depending on screen resolution without adding to the binary file size.

With that said, here is how to do it.

Let’s first create a fresh NativeScript Android and iOS project by running the following in your Command Prompt (Windows) or Terminal (Mac and Linux):

tns create ExampleProject
cd ExampleProject
tns platform add ios
tns platform add android

It is important to note, if you’re not using a Mac then you cannot add and build for the iOS platform.

Now it is time to download the latest Font Awesome font set. Extract the archive and find the TTF file, more than likely found at fonts/fontawesome-webfont.ttf. This file should be placed at app/fonts/fontawesome-webfont.ttf in your project.

The NativeScript app will pick up fonts found in the fonts directory.

Now you need to open your project’s app/app.css and create a class with the new font-family. Something like this would work:

.font-awesome {
    font-family: "FontAwesome";
}

It doesn’t matter what you call the class, but it is important the font-family. I found the name through the official documentation for Font Awesome.

Now open your project’s app/main-page.xml file and change it to the following:

Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
    <StackLayout>
        <Label text="Tap the button" class="title"/>
        <Button text="&#xf1e0; Test" tap="{{ tapAction }}" class="font-awesome" />
        <Label text="{{ message }}" class="message" textWrap="true"/>
    </StackLayout>
</Page>

Really we just added our class to the Button tag and made use of the unicode value for a particular icon. In our case  is a social sharing icon.

Want to use a different icon? Go to the Font Awesome master list, click on a particular icon, and then copy the unicode value.

It is just that easy!

Conclusion

Using fonts for icons in your NativeScript application is a great idea. It is easy to do, keeps your application file size small, and the icons look great on all screen resolutions. You don’t need to restrict your icon use to only Font Awesome. You can expand your icon list to IonIcons, or Material Design icons like what Telerik mentioned.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.