To integrate Font Awesome Icons into your Flutter applications, you can use a popular package in the Flutter framework called “font_awesome_flutter.” It provides 2000 additional icons.
It gives you access to a large selection of icons that you can use in different Flutter UI widgets. Only Font Awesome's default-free icons are included in this icon set.
Please follow the steps below to enable support for the pro icons if you have purchased them.
Installation:
Run the following command with flutter,
$ flutter pub add font_awesome_flutter
After running this command, you will have a line in your pubspec.yaml file under dependencies as follows (and run an implicit flutter pub get):
font_awesome_flutter: ^10.6.0
Alternatively, “flutter pub get” could be supported by your editor.
After this, you can use this in your “flutter application’s dart file,” like this,
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class MyWidget extends StatelessWidget {
Widget build(BuildContext context) {
return IconButton(
icon: FaIcon(FontAwesomeIcons.gamepad),
onPressed: () { print("Pressed"); }
);
}
}
The names on the icons are the same as those on the official website, although they're written in lowercase. The style name is used as a prefix when an icon is accessible in many icon styles, except "regular." Dart has limitations; thus, icons that begin with a number have the number written out.
Go to the app's pubspec.yaml and add a dependency for font_awesome_flutter: '>= 4.7.0' in order to use your customized version in the app. Next, override the location of the dependency:
dependencies:
font_awesome_flutter: '>= 4.7.0'
...
dependency_overrides:
font_awesome_flutter:
path: path/to/your/font_awesome_flutter
...
You agree that it is your responsibility to keep these files private by importing pro icons. This includes not publishing your package on any public file-sharing websites or public github repositories.
Locate your font_awesome_flutter version there (see setup).
Download and launch Font Awesome Pro's web version.
Transfer icons.json from metadata and all.ttf files from the “webfonts” directory to path/to/your/font_awesome_flutter/lib/fonts. Change out the current files.
Launch the configurator. The message "Custom icons.json found" should show. Apps that use this version of Flutter may need to run Flutter clean before changes take effect.
By passing them the --exclude option, one or more styles can be kept out of all generation processes:
$ ./configurator.sh --exclude solid
$ ./configurator.sh --exclude solid,brands
After support for pro icons, this feature—being able to access an icon by name—is perhaps the most requested. Before, this was not feasible since all of the optimizations that were stated would be broken by a mapping from name to icon. Please remember that this is still the situation. Flutter is unable to delete any icons because they may all hypothetically be requested. It is strongly recommended that you utilize this option in conjunction with as few and a restricted collection of styles as feasible. For your app to work, you might need to build it with the --no-tree-shake-icons parameter.
This is now an optional feature that can be used with the new configuration tool. To create, run the tool with the --dynamic flag set.
$ ./configurator.sh --dynamic
To utilize the map, import the following. When using faIconNameMapping for regular icons, use a key in the format style icon-name'.
import 'package:font_awesome_flutter/name_icon_mapping.dart';
...
FaIcon(faIconNameMapping['solid abacus']);
...
Combine the configurator options to remove styles that aren't in use:
$ ./configurator.sh --dynamic --exclude solid
Getting CSS classes from a server is also a typical use case. The utility function getIconFromCss() returns the icon that a browser would display after receiving a string of classes:
getIconFromCss('far custom-class fa-abacus'); The package has been designed to use the least amount of resources possible.
The only icon definitions loaded into RAM are those that are necessary because all links (such as FontAwesomeIcons.abacus) to unnecessary icons will be eliminated automatically.
To read more about making API requests in Flutter, refer to our blog How to Make API Requests in Flutter