Flutter Icon Pack: font_awesome_flutter

Published on by Flutter News Hub

Flutter Icon Pack: font_awesome_flutter

The font_awesome_flutter package provides a comprehensive set of free Font Awesome icons as Flutter icons. This package includes only the free icons offered by Font Awesome out-of-the-box, but you can enable support for pro icons by following the instructions below.

Installation

  1. Add the following line to your pubspec.yaml file:
dependencies:
  font_awesome_flutter:

Usage

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: FaIcon(FontAwesomeIcons.gamepad),
      onPressed: () {
        print("Pressed");
      },
    );
  }
}

Icon Names

Icon names correspond to those on the Font Awesome website but are written in lower camel case. For example, the angle-double-up icon is accessed as FontAwesomeIcons.angleDoubleUp. If an icon is available in multiple styles, the style name is used as a prefix.

Customizing font_awesome_flutter

You can customize the package using the configurator tool. This tool allows you to:

  • Enable pro icons
  • Exclude styles (e.g., solid, brands, etc.)
  • Retrieve icons dynamically by their name or CSS class

To use the configurator:

  1. Clone the font_awesome_flutter repository.
  2. Run flutter pub get to install dependencies.
  3. Run the configurator by executing ./configurator.sh on Linux/Mac or configurator.bat on Windows.

Optimizations

The package has been designed to minimize file size and RAM usage. Unused icons and icon styles are automatically removed during the build process.

Troubleshooting

Icons are not aligned properly or cut off: Use the FaIcon widget instead of the Icon widget to ensure proper alignment and display.

Icons are not visible on mobile devices: Stop the app, run flutter clean, delete the app from the device, and then rebuild and deploy the app.

Icons are not visible on the web: Ensure that the fonts are correctly added to the FontManifest.json.

Configurator does not run on Mac/Linux: Give execute permission to the configurator.sh script or run commands by prepending sh.

Conclusion

The font_awesome_flutter package is a powerful tool for integrating Font Awesome icons into your Flutter applications. Its customization options and optimizations ensure that it meets the needs of a wide range of projects.

Flutter News Hub