font_awesome_flutter#

ThefreeFont Awesome Icon pack availableas set of Flutter Icons - based on font awesome version 7.1.0.

This icon pack includes only thefree icons offered by Font Awesome out-of-the-box.If you have purchased the pro icons and want to enable support for them, please see the instructions below.

Installation#

In thedependencies: section of yourpubspec.yaml, add the following line:

dependencies:  font_awesome_flutter: <latest_version>

Usage#

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

Icon names#

Icon names equal those on theofficial website, but are written in lower camel case. If more than one icon style is available for an icon, the style name is used as prefix, except for "regular".Due to restrictions in dart, icons starting with numbers have those numbers written out.

Examples:

Example App#

View the Flutter app in theexample directory to see all the availableFontAwesomeIcons.

Customizing font awesome flutter#

We supply a configurator tool to assist you with common customizations to this package.All options are interoperable.By default, if run without arguments and noicons.json inlib/fonts exists, it updates all icons to thenewest free version of font awesome.

Setup#

To use your custom version, you must first clonethis repositoryto a location of your choice and runflutter pub get inside. This installs all dependencies.

The configurator is located in theutil folder and can be started by runningconfigurator.bat on Windows, or./configurator.sh on linux and mac. All following examples use the.sh version, but work same for.bat.(If on windows, omit the./ or replace it with.\.)An overview of available options can be viewed with./configurator.sh --help.

To use your customized version in an app, go to the app'spubspec.yaml and add a dependency forfont_awesome_flutter: '>= 4.7.0'. Then override the dependency's location:

dependencies:  font_awesome_flutter: '>= 4.7.0'  ...  dependency_overrides:  font_awesome_flutter:    path: path/to/your/font_awesome_flutter  ...

Enable pro icons#

❗ By importing pro icons you acknowledge that it is your obligationto keep these files private. This includesnot uploading your package toa public github repository or other public file sharing services.

• Go to the location of your custom font_awesome_flutter version (seesetup)
• Download the desktop version of font awesome pro and open it
• Moveall.otf files from theotfs directory andicons.json frommetadata topath/to/your/font_awesome_flutter/lib/fonts. Replace existing files.
  • To prevent issues with the web and testing, make sure toreplace spaces in the filenames with dashes.
  • Newer versions might have anicon-families.json. If this is the case,move its contents topath/to/your/font_awesome_flutter/lib/fonts/icons.json.
• Run the configurator. It should say "Custom icons.json found"

It may be required to runflutter clean in apps who use this version for changes to appear.

Excluding styles#

One or more styles can be excluded from all generation processes by passing them with the--exclude option:

$ ./configurator.sh --exclude solid$ ./configurator.sh --exclude solid,brands

See theoptimizations anddynamic icon retrieval by namesections for more information as to why it makes sense for your app.

Retrieve icons dynamically by their name or css class#

Probably the most requested feature after support for pro icons is the ability to retrieve an icon by their name.This was previously not possible, because a mapping from name to icon would break alldiscussed optimizations. Please bear in mind that this is still the case.As all icons could theoretically be requested, none can be removed by flutter. It is strongly advised to only use thisoption in conjunction witha limited set of styles and with as few of them as possible. You mayneed to build your app with the--no-tree-shake-icons flag for it to succeed.

Using the configurator tool, this is now an optional feature. Run the tool with the--dynamic flag to generate...

$ ./configurator.sh --dynamic

...and use the following import to access the map. For normal icons, usefaIconNameMapping with a key of this format: 'style icon-name'.

import 'package:font_awesome_flutter/name_icon_mapping.dart';...    FaIcon(faIconNameMapping['solid abacus']);...

To exclude unused styles combine the configurator options:

$ ./configurator.sh --dynamic --exclude solid

A common use case also includes fetching css classes from a server. The utility functiongetIconFromCss() takes astring of classes and returns the icon which would be shown by a browser:

getIconFromCss('far custom-class fa-abacus'); // returns the abacus icon in regular style. custom-class is ignored

Duotone icons#

Duotone support has been discontinued after font awesome changed the way they lay out the icon glyphs inside the font'sfile. The new way using ligatures is not supported by flutter at the moment.

For more information on why duotone icon support was discontinued, seethis comment.

FAQ#