How to Upgrade Font Awesome Icons from v4 to v5+ Android Development

Are you using Font Awesome Icons in your Android project and don’t know how to upgrade from version 4 to a newer one? Here’s a step-by-step guide.

I guess you already know all the benefits of the Font Awesome Icons typeface, such as a huge number of free icons, different icon styles and cool customization options. So, all you want is to update your current version of this font.

Difference between version 4 and newer

Starting from version 5 of Font Awesome, the previously single typeface is split into 3 typefaces. Brands, regular and solid. Therefore, if you want the latest icons, you need to use the latest fonts from the official website. Also, you need to use appropriate typeface for each icon. You can find the typeface for every icon you need at the Font Awesome website.

Previously, you always only used one .ttf file, but now you need to use 3 different .ttf files. And here is the best way out of this situation.

Step 1. Download new fonts

First of all, you need to go the official fontawesome.com site and download Font Awesome Free for Web.

You will have a .zip, next, you extract from webfonts all 3 files with extension .ttf.

Then you replace old Font Awesome .ttf with the 3 extracted .ttf files in the font folder of your res/ directory inside of the android project.

Step 2. Create Font Awesome view class

Before creating the class file, you need to define some attributes for your future view. So, let’s create attrs.xml file in the res/values directory. And put the following code there:

You’ve defined two Boolean params for your FontAwesomeView. Obviously, when you need a brand icon, you set brand_icon to true, by default it will be false. And then code in the class will handle inflating the correct typeface to display the icon.

Now we need to create a FontAwesomeIcon view and set Font Awesome typeface in it. Depending on the installed typeface in the view constructor, you can display different icons. I did it in Kotlin, but I’m sure you can easily rewrite it in Java if you need it. Here is the code:

You’ve added some code that sets the default typeface to regular typeface. And if we need brands or solid icons, then we need to set the corresponding parameter in the xml code. Of course, you can handle this in a different way.

Step 3. Usage

Ok, now let’s find some icons to display. Go to fontawesome.com/icons and select any icons you want to add to your app.

Here you can download the icon in different formats, but we are only interested in the Unicode of this icon. In this case, it is f082. You will use this code to display icon in your application. Also, on this page, you can find out if the icon you want is part of the brand, solid or regular font.

I have put all selected icon codes in strings.xml

Here is the final xml code, to display 4 brand icons. You can set color of icon directly in the xml definition. I used versions 4 and 5 to compare what is the difference in use now. The only difference is that you need to define the icon type in the xml using our custom params brand_icon and solid_icon.

In fact, only these parameters are needed to get started.

Also, the style used in the above code.

And the result screen.

P.S. You can check all source code for Android Font Awesome Icons app here:

Developer, Thinker, Dreamer