Font Awesome is very popular icon toolkit used across many websites. It has both free and pro collection of icons, but you can find most the icons in free collection itself. Each icon will represented by unicode (). We use this unicode to display the icon in TextView. As it’s a normal TextView, all the text styling attributes (color, size, paddings etc.,) can be applied.

For an example if you want to display android Robot logo, you can use  unicode as TextView value.

android-using-font-awesome-icon-collection

1. Font Awesome Android Library

In order to use the font awesome icon collection, you have to add the font awesome font files to your assets directly and apply the appropriate fontFace on to TextView which is simpler task. But we want the icons to be displayed in other widgets also like in Buttons, Menus, Bottom Navigation and Navigation Drawer etc,. Displaying icon in non-textual views takes some effort. So I have written a by incorporating all the necessary methods to render the icons in multiple widgets.

To get started, include the fontawesome in your build.gradle and sync your project.

dependencies {
    // font awesome
    implementation 'info.androidhive:fontawesome:0.0.5'
}

2. How to use it?

2.1 Displaying Icon in TextView

The easiest way to display the font icon is, use the FontTextView text by setting the appropriate icon name as text value. This widget extends from AppCompatTextView, so all the text view attributes applies to this widget.

<info.androidhive.fontawesome.FontTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/fa_calendar_check_solid"
            android:textColor="@color/icon_color"
            android:textSize="@dimen/icon_size"
            app:solid_icon="true" />
  • solid_icon: To display solid icon, set this value as true.
  • brand_icon: To display brand icon, set this value as true.
font-awesome-android-icons

2.2 Using FontDrawable

Using the icon in xml layout is easy, but if you want to use the icon for other widget like button or menu, you can use the FontDrawable element to apply the icon.

For an example, if you want to use the font awesome icon to Floating Action Button, you can use the FontDrawable as shown below.

FloatingActionButton fab = findViewById(R.id.fab);

// using paper plane icon for FAB
FontDrawable drawable = new FontDrawable(this, R.string.fa_paper_plane_solid, true, false);

// white color to icon
drawable.setTextColor(ContextCompat.getColor(this, android.R.color.white));
fab.setImageDrawable(drawable);
font-awesome-floating-action-button

2.3 Using in Menus (Bottom Navigation, Navigation Drawer etc.,)

You can also use the font icons in the widgets that uses menu file to render the items like Toolbar icons, Bottom Navigation, Navigation Drawer etc., To render the icon in menus, you can use the FontDrawable to set the icons, but it needs few hacks through java code.

The below example shows rending the font awesome icons in Navigation Drawer menu. Full example can be found here.

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        intDrawerLayout();
    }

    /**
     * Changing navigation drawer icons
     * This involves looping through menu items and applying icons
     */
    private void intDrawerLayout() {
        NavigationView navigationView = findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);

        ImageView iconHeader = navigationView.getHeaderView(0).findViewById(R.id.nav_header_icon);
        FontDrawable drawable = new FontDrawable(this, R.string.fa_font_awesome, false, true);
        drawable.setTextColor(ContextCompat.getColor(this, android.R.color.white));
        drawable.setTextSize(50);
        iconHeader.setImageDrawable(drawable);

        int[] icons = {
                R.string.fa_home_solid, R.string.fa_calendar_alt_solid, R.string.fa_user_solid,
                R.string.fa_heart_solid, R.string.fa_comment_solid, R.string.fa_dollar_sign_solid, R.string.fa_gift_solid
        };
        renderMenuIcons(navigationView.getMenu(), icons, true, false);

        int[] iconsSubmenu = {R.string.fa_cog_solid, R.string.fa_sign_out_alt_solid};

        renderMenuIcons(navigationView.getMenu().getItem(7).getSubMenu(), iconsSubmenu, true, false);
    }

    /**
     * Looping through menu icons are applying font drawable
     */
    private void renderMenuIcons(Menu menu, int[] icons, boolean isSolid, boolean isBrand) {
        for (int i = 0; i < menu.size(); i++) {
            MenuItem menuItem = menu.getItem(i);
            if (!menuItem.hasSubMenu()) {
                FontDrawable drawable = new FontDrawable(this, icons[i], isSolid, isBrand);
                drawable.setTextColor(ContextCompat.getColor(this, R.color.icon_nav_drawer));
                drawable.setTextSize(22);
                menu.getItem(i).setIcon(drawable);
            }
        }
    }
}
android-font-awesome-navigation-drawer

I hope you like this library. If you have any suggestions, please let me know in the comment section below.

Happy Coding ๐Ÿ™‚

Subscribe
Notify of
guest
48 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ken Choong
Ken Choong
1 year ago

wow..this is so nice.definitely need this

Ravi Tamada
1 year ago
Reply to  Ken Choong

Thanks:)

Zakaria Mansoor
Zakaria Mansoor
1 year ago

Great, i was looking for such a tutorial

Ravi Tamada
1 year ago

Cheers!

Chobela Kakumbi
Chobela Kakumbi
1 year ago

Hai Ravi.. Is there really a difference between fontawesome icons and native android icons?

Ravi Tamada
1 year ago

Which icon set you are referring native android icons to?

android
android
1 year ago
Reply to  Ravi Tamada

maybe his refering to native android vector drawable in android studio

Chobela Kakumbi
Chobela Kakumbi
1 year ago
Reply to  android

exactly

Ravi Tamada
1 year ago

I got your point. These two has different collection of icon sets. Not all the icons are available in android icon set. Again it depends on your requirement. I recently worked on an app that has few hundreds of icons to be displayed from which user can select one. I choose font awesome as it has great collection.

Also in this library, I used the font files ttf directly instead of svgs because of the time crunch.

Rahul Kumar
Rahul Kumar
1 year ago

Great ! This time you have explain your own lib.(Ha ha ha)
You always share a very good knowledge. ๐Ÿ™‚
Thank you again your great contribution. I have one request, if possible
can you share one tutorial for “mvvm” bassed on new architecture component ?

Ravi Tamada
1 year ago
Reply to  Rahul Kumar

Thanks Rahul. I have MVVM in my queue since 6months but couldn’t complete the article ๐Ÿ™ I have to post a code sample at least on my git.

Danny Vaca
Danny Vaca
1 year ago

Pleeeeeease write tutorials with flutter, I love your tutorials ๐Ÿ˜€

Arturo Perez
Arturo Perez
1 year ago

Great library!

How i can use it in a Bottom Navigation?

Ravi Tamada
1 year ago
Reply to  Arturo Perez

I have given an example on how to render the icons in menu file. You can use the same to render the bottom navigation.

Parwinder Singh
Parwinder Singh
1 year ago

This is awesome library.

Ravi could you please make a tutorial for streaming audio player with recording option just like exoplayer, may be custom EXOPlayer.

Thanks

kabil dev
kabil dev
1 year ago

Great work
Can you please make tutorial MVC, MVP, MVVM bro?

Ravi Tamada
1 year ago
Reply to  kabil dev

Preparing one article on Dagger2 and MVVM. It takes 2-3 weeks to prepare.

Ibrahim Samad
Ibrahim Samad
1 year ago

Greatest blog on the internet for Android development. Has everything you need to get started.

Ravi Tamada
1 year ago
Reply to  Ibrahim Samad

Thanks Ibrahim ๐Ÿ™‚

Yokesh Kp
Yokesh Kp
1 year ago

Hey there bro, i wanna learn backend services.Which language would be suitable to learn backend?

Ravi Tamada
1 year ago
Reply to  Yokesh Kp

To get started learn PHP. Then move on to RoR, Node js or Django.

Yokesh Kp
Yokesh Kp
1 year ago
Reply to  Ravi Tamada

How about learning JSP? Is there any advantages of learning PHP over JSP?

Ambreen Khan
Ambreen Khan
1 year ago

Hi Ravi,
I am the very old follower of your website and great work, (From basic to till I mostly learn from you,”Specially You introduced me with parse server and applications on it”), Now I am here to requesting you to write a post about Android Equalizer (Because there is no example / tutorial or much detail on the internet for mediator like me). Hope you will consider my request.

Alan Godoi
Alan Godoi
1 year ago

Teach us how to make a library for Android. ๐Ÿ™‚

AbelardoLG
AbelardoLG
1 year ago

Hi :disqus ,

IMHO, your post is a bit confused since it seems there are two examples when there is only an example really.

If you allow a suggestion in order to improve this post, I would like to give it you with pleasure.

Best regards.

Sudeep Banerjee
1 year ago
Reply to  AbelardoLG

lol

Ravi Tamada
1 year ago
Reply to  AbelardoLG

Example 1: Setting fa icon value directly in xml
Example 2: Programatically displaying icon in Android views like buttons, fab.
Example 3: Using the icons in widgets that uses menu files to render icons.

Let me know if this is still not clear.

AbelardoLG
AbelardoLG
1 year ago

ERROR: Plugin with id ‘com.android.library’ not found

I opened your project but AS showed the above message.

Any idea to solve this issue?

Android Studio 3.4.1
Build #AI-183.6156.11.34.5522156, built on May 1, 2019
JRE: 1.8.0_152-release-1343-b01 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 10 10.0

keshav gera
keshav gera
1 year ago

Hi Sir , Please create one more Post Auto verify moble number using Incoming call same as Ola App Login Screen

Mariya
1 year ago

Thanks for sharing with us……

Aqua Boogie
Aqua Boogie
1 year ago

Hi,

I’m having trouble with this. My icons are not rendering properly. Most of them are showing up as a rectangular box.

I added the three java files into a folder: “com.mycompany.appname.fontawesome”
Then I changed package name in the files to match folder path

I added the three .ttf files to the assets folder

I added the strings to strings.xml
I added the attribs file to the “res/values” folder

I added this to build.gradle: implementation ‘info.androidhive:fontawesome:0.0.5’

Here is my textview:

What am I missing here?

thanks in advance!

Aqua Boogie
Aqua Boogie
1 year ago

You’re an asshole for deleting my question you fucking prick. Your documentation sucks by the way.

Aqua Boogie
Aqua Boogie
1 year ago

This fucking prick deletes legitimate questions instead of trying to help people out. You’re a fucking asshole and I hope you grow balls in your throat while sleeping tonight, fuckface.

Aqua Boogie
Aqua Boogie
1 year ago

I bet you suck your own dick don’t you. Notice the lack of anything but positive messages on here. Where are the actual legitimate questions people might have on your library, fuckface?

Aqua Boogie
Aqua Boogie
1 year ago

1. download code
2. file > new > import module in Android Studio
3. select the font awesome subfolder and finish the import wizard
4. if not using artifactory, delete or comment that code in build.gradle
5. make sure: targetSdkVersion and compileSdkVersion = 28
6. put the .ttf files into your assets folder
7. try to build project. If it don’t work at that point it should be something minimal. Try posting on stackoverflow because it looks like he has abandoned replying on this discussion…

*You can also run the downloaded project and dissect it to see how it works.

**Do not download individual files from github. Download the whole zip file

***If icons don’t render properly, try putting fresh copies of the .ttf files into your assets folder

Hope this helps!

…and I would like to humbly thank the author of this code for the work he did!

Ravi Tamada
1 year ago
Reply to  Aqua Boogie

Thanks Boogie:)

Farouk Sabiou
Farouk Sabiou
1 year ago

Hi :disqus how can I use my icons with the library. I have a .ttff file how can I integrate it ?

Ravi Tamada
1 year ago
Reply to  Farouk Sabiou

Is it a web font?

Farouk Sabiou
Farouk Sabiou
1 year ago
Reply to  Ravi Tamada

yeah it’s a webfont

Farouk Sabiou
Farouk Sabiou
1 year ago
Reply to  Farouk Sabiou

Update: It’s not a web font but a font-awesome.ttf file. How can I use it in my android app ?

Diego Andrรฉs
Diego Andrรฉs
1 year ago

Fucking thank you, been watching a lot of tutorials that didn’t work for me. This is simple and very efficient.
BTW, I’m working on a very simple project that requires backend, do you think PHP is the easiest way to go for such a simple project? I already know that language but unsure if it’s good enough.

Ravi Tamada
1 year ago

You are welcome ๐Ÿ™‚

Yes PHP is easiest way to get started but once you got enough knowledge move onto RoR or Django.

Afif Firdaus W
Afif Firdaus W
1 year ago

Waw, thank ou

Ravi Tamada
1 year ago
Reply to  Afif Firdaus W

You are welcome ๐Ÿ™‚

Royalways Developer
Royalways Developer
11 months ago

Hello Ravi

Please make tutorial on viewmodel with navigational drawer project as new technology

Thanks

illison matos
illison matos
7 months ago

Hi, you can help me, in my layout have a message “Error mapping font file fa-solid-900.ttf ” how I can fix it

Ahmed
Ahmed
1 month ago

How can I use Font Awesome with BottomNavigationView pleaaase

48
0
Would love your thoughts, please comment.x
()
x