How to use Font Awesome Icons in Flutter

Font Awesome is a very popular icon toolkit based on CSS and LESS available in the market. It comes with both free and premium versions of icons collection but most of the collections are free of cost. It is very popular nowadays because it is lightweight, easy to use and faster in loading as compared to traditional images or icon sets.

In our previous post, we have learned about using custom google fonts in flutter apps. Today, In this post, we will learn using font awesome icons in a flutter.

1. Font awesome Flutter Package

Font awesome flutter package provides icon packs as flutter icons so that we can use them in our flutter apps. It includes all free icons:

  • Regular Icon Sets
  • Solid Icon Sets
  • Brands Icon sets
Fontawesome icons

1.1 Installation of Fontawesome Icons

In the dependencies section of your pubspec.yaml file, add the following line:

font_awesome_flutter: <latest_version>
pubspec.yaml

After adding the above line, click on Packages get in the Android Studio IDE, to download the package into your project.

Once the download is finished, it is ready to use in our project.

2. How to use it?

In order to use it anywhere in our project, we just need to include the following line of code at the top of the particular file (main.dart in my case).

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

Once we include the above line, now flutter will detect our Font Awesome package into the particular file so that we can use it.

IconButton(
             icon: FaIcon(FontAwesomeIcons.surprise),
             onPressed: (){},
             iconSize: 16.0,
              ),

For the IconData class, here we use FaIcon widget provided by our Font Awesome package and access the icons through FontAwesomeIcons class.

3. Using in Menus

3.1 Using Font awesome in Navigation Drawer

In our previous post, we have seen how to implement Navigation Drawer in our flutter apps. In this section of this article, we are going to learn to use Font Awesome in Navigation Drawer as shown in the figure shown below:

Usage of Fontawesome in Navigation Drawer

In order to achieve this, we will have to write the following code:

drawer: Builder(
        builder: (BuildContext context){
          return Drawer(
            child: ListView(
              children: <Widget>[
                UserAccountsDrawerHeader(
                  accountName: Text('Coding Ninja'),
                  accountEmail: Text('ninja@codingninja.info'),
                  currentAccountPicture: CircleAvatar(
                      backgroundColor: Colors.deepPurple,
                      child: Text("C")),
                ),
                ListTile(
                  leading: FaIcon(FontAwesomeIcons.home),
                  title: Text('Home'),
                  onTap: () {
                    //add routes to navigate

                  },
                ),
                ListTile(
                  leading: FaIcon(FontAwesomeIcons.servicestack),
                  title: Text('Services'),
                  onTap: () {
                    //add routes to navigate

                  },
                ),
                Divider(
                  color: Colors.black87,
                ),
                ListTile(
                  leading: FaIcon(FontAwesomeIcons.cogs),
                  title: Text('Settings'),
                  onTap: () {
                    //add routes to navigate

                  },
                ),
                ListTile(
                  leading: FaIcon(FontAwesomeIcons.exclamation),
                  title: Text('Report Problem'),
                  onTap: () {
                    //add routes to navigate

                  },
                ),
              ],
            ),
          );

3.2 Using Font awesome in Bottom Navigation Bar

In our previous post, we have seen how to implement Bottom Navigation Bar in our flutter apps. In this section of this article, we are going to learn to use font awesome in Bottom Navigation Bar as shown in the figure shown below:

use of Fontawesome in Bottom Navigation Bar

We can achieve it by writing the following code:

bottomNavigationBar: Builder(
        builder: (BuildContext context){
          return BottomNavigationBar(
            items: [
              BottomNavigationBarItem(
                icon: FaIcon(FontAwesomeIcons.home),
                title: new Text('Home'),
              ),
              BottomNavigationBarItem(
                icon: FaIcon(FontAwesomeIcons.envelope),
                title: new Text('Messages'),
              ),
              BottomNavigationBarItem(
                  icon: FaIcon(FontAwesomeIcons.user),
                  title: Text('Profile')
              )
            ],
          );

4. Using with custom Flutter widgets

Custom flutter widgets are very useful when we want to create our own widgets to achieve certain functionality or re-usability.

We can also use font awesome in our custom flutter widgets in the following way:

class MyCustomWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return IconButton(
      // Use the FaIcon Widget + FontAwesomeIcons class for the IconData
      icon: FaIcon(FontAwesomeIcons.gamepad), 
      onPressed: () { print("Pressed"); }
     );
  }
}

5. Final Words

Congrats! we have come to the end of this article. Fontawesome is a great icon pack with hundreds of icons and is updated daily with the new ones. So what are you waiting for? Try it out in your flutter apps.

Happy Coding! 🙂