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 πŸ™‚

Hi there! I am Founder at androidhive and programming enthusiast. My skills includes Android, iOS, PHP, Ruby on Rails and lot more. If you have any idea that you would want me to develop? Let’s talk: ravi@androidhive.info
  • Ken Choong

    wow..this is so nice.definitely need this

  • Zakaria Mansoor

    Great, i was looking for such a tutorial

  • Chobela Kakumbi

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

    • Which icon set you are referring native android icons to?

      • android

        maybe his refering to native android vector drawable in android studio

        • Chobela Kakumbi

          exactly

          • 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

    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 ?

    • 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

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

  • Arturo Perez

    Great library!

    How i can use it in a Bottom Navigation?

    • 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

    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