How to use Font Awesome in Flutter?

In this post, you will learn how to use Font Awesome icons in a Flutter app.

First, we need to add a dependency to the project’s pubspec.yaml file. Add the code below to the project’s pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  font_awesome_flutter: ^10.2.1

Now, import the package.

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

We are all set to use Font Awesome icons. We can add icons like this –

 FaIcon(FontAwesomeIcons.barsStaggered)

Let’s see the full code.

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(appBar: AppBar(title: Text('Font Awesome Example'),),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
        children: [
         Container(
          width: 120.0,
          child:ElevatedButton.icon(
              onPressed: (){},
              icon: FaIcon(FontAwesomeIcons.barsStaggered),
              label: Text('Menu'),) ),
          SizedBox(height: 20.0,),
          Container(
           width: 120.0,
           child: ElevatedButton.icon(
                 onPressed: (){},
                 icon: FaIcon(FontAwesomeIcons.gear),
                 label: Text('Settings'),),
            ),
          SizedBox(height: 20.0,),
          Container(
           width: 120.0,
           child: ElevatedButton.icon(
                 onPressed: (){},
                 icon: FaIcon(FontAwesomeIcons.share),
                 label: Text('Share'),),
            )
      ],),)),
    );
  }
}


Output:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: