font_awesome_flutter

Description:

font awesome flutter

font_awesome_flutter #


The free Font Awesome Icon pack available
as set of Flutter Icons - based on font awesome version 6.5.1.
This icon pack includes only the free 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 the dependencies: section of your pubspec.yaml, add the following line:
dependencies:
font_awesome_flutter: <latest_version>
copied to clipboard
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"); }
);
}
}
copied to clipboard
Icon names #
Icon names equal those on the official 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:



Icon name
Code
Style




angle-double-up
FontAwesomeIcons.angleDoubleUp
solid (this icon does not have other free styles)


arrow-alt-circle-up
FontAwesomeIcons.arrowAltCircleUp
regular


arrow-alt-circle-up
FontAwesomeIcons.solidArrowAltCircleUp
solid


1
FontAwesomeIcons.solidOne
solid



Example App #
View the Flutter app in the example directory to see all the available FontAwesomeIcons.
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 no icons.json in lib/fonts exists, it updates all icons to the
newest free version of font awesome.
Setup #
To use your custom version, you must first clone this repository
to a location of your choice and run flutter pub get inside. This installs all dependencies.
The configurator is located in the util folder and can be started by running configurator.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's pubspec.yaml and add a dependency for
font_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
...
copied to clipboard
Enable pro icons #
❗ By importing pro icons you acknowledge that it is your obligation
to keep these files private. This includes not uploading your package to
a public github repository or other public file sharing services.

Go to the location of your custom font_awesome_flutter version (see setup)
Download the web version of font awesome pro and open it
Move all .ttf files from the webfonts directory and icons.json from metadata to
path/to/your/font_awesome_flutter/lib/fonts. Replace existing files.
Run the configurator. It should say "Custom icons.json found"

It may be required to run flutter 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
copied to clipboard
See the optimizations and dynamic icon retrieval by name
sections 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 all
discussed 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 this
option in conjunction with a limited set of styles and with as few of them as possible. You may
need to build your app with the --no-tree-shake-icons flag for it to succeed.
Using the new configurator tool, this is now an optional feature. Run the tool with the --dynamic flag to generate...
$ ./configurator.sh --dynamic
copied to clipboard
...and the following import to use the map. For normal icons, use faIconNameMapping with a key of this format:
'style icon-name'.
import 'package:font_awesome_flutter/name_icon_mapping.dart';

...
FaIcon(faIconNameMapping['solid abacus']);
...
copied to clipboard
To exclude unused styles combine the configurator options:
$ ./configurator.sh --dynamic --exclude solid
copied to clipboard
A common use case also includes fetching css classes from a server. The utility function getIconFromCss() takes a
string 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
copied to clipboard
Duotone icons #
Duotone support has been discontinued after font awesome changed the way they lay out the icon glyphs inside the font's
file. The new way using ligatures is not supported by flutter at the moment.
For more information on why duotone icon support was discontinued, see
this comment.
FAQ #

Why aren't the icons aligned properly or why are the icons being cut off?
Please use the `FaIcon` widget provided by the library instead of the `Icon`
widget provided by Flutter. The `Icon` widget assumes all icons are square, but
many Font Awesome Icons are not.


What about file size and ram usage
This package has been written in a way so that it only uses the minimum amount of resources required.
All links (eg. FontAwesomeIcons.abacus) to unused icons will be removed automatically, which means only required icon
definitions are loaded into ram.
Flutter 1.22 added icon tree shaking. This means unused icon "images" will be removed as well. However, this only
applies to styles of which at least one icon has been used. Assuming only icons of style "regular" are being used,
"regular" will be minified to only include the used icons and "solid" and "brands" will stay in their raw, complete
form. This issue is being tracked over in the flutter repository.
However, using the configurator, you can easily exclude styles from the package. For more information, see
customizing font awesome flutter


Why aren't the icons showing up on Mobile devices?
If you're not seeing any icons at all, sometimes it means that Flutter has a cached version of the app on device and
hasn't pushed the new fonts. I've run into that as well a few times...
Please try:

Stopping the app
Running flutter clean in your app directory
Deleting the app from your simulator / emulator / device
Rebuild & Deploy the app.



Why aren't the icons showing up on Web?
Most likely, the fonts were not correctly added to the `FontManifest.json`.
Note: older versions of Flutter did not properly package non-Material fonts
in the `FontManifest.json` during the build step, but that issue has been
resolved and this shouldn't be much of a problem these days.
Please ensure you are using Flutter 1.14.6 beta or newer!


Why does mac/linux not run the configurator?
This is most probably due to missing file permissions. Downloaded scripts cannot be executed by default.
Either give the execute permission to util/configurator.sh with $ chmod +x configurator.sh or run the commands by prepending an sh:
$ sh ./configurator.sh