Author: Robert Haba

Font Awesome is a widely used icon toolkit that may be found on a variety of websites. It features both a free and a paid icon collection, but the free collection has the majority of the icons. Unicode () will be used to represent each icon. In TextView, we utilize this unicode to display the icon. All text styling elements (color, size, paddings, etc.) can be added because it’s a regular TextView.

If you wish to display the android Robot logo, for example, you can use  unicode as the TextView value.

1. Font Awesome Android Library

To use the Font Awesome icon collection, simply add the font awesome font files to your assets and apply the relevant fontFace to the TextView, which is a much easier operation. However, we’d like the icons to appear in other widgets as well, such as Buttons, Menus, Bottom Navigation, and Navigation Drawer. It requires some effort to display an icon in a non-textual view. As a result, I created a library that has all of the essential methods for rendering icons in numerous 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?

Displaying Icon in TextView

Using the FontTextView text and specifying the proper icon name as text value is the simplest way to display the font icon. Because this widget is derived from AppCompatTextView, it inherits all of the text view properties.

<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.

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);

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

You can also use font icons in widgets that use the menu file to generate elements like Toolbar icons, Bottom Navigation, and Navigation Drawer, among others. You can use the FontDrawable to configure the icons in menus, however it requires a few hacks using 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);
            }
        }
    }
}