- Notifications
You must be signed in to change notification settings - Fork282
The Font Awesome Icon pack available as Flutter Icons
License
fluttercommunity/font_awesome_flutter
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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.
In thedependencies: section of yourpubspec.yaml, add the following line:
dependencies:font_awesome_flutter:<latest_version>
import'package:font_awesome_flutter/font_awesome_flutter.dart';classMyWidgetextendsStatelessWidget {Widgetbuild(BuildContext context) {returnIconButton(// Use the FaIcon Widget + FontAwesomeIcons class for the IconData icon:FaIcon(FontAwesomeIcons.gamepad), onPressed: () {print("Pressed"); } ); }}
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.
| 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 |
View the Flutter app in theexample directory to see all the availableFontAwesomeIcons.
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.
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...
❗ 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
.otffiles from theotfsdirectory andicons.jsonfrommetadatatopath/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 an
icon-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.
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,brandsSee theoptimizations anddynamic icon retrieval by namesections for more information as to why it makes sense for your app.
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 solidA 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 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.
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.
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 icondefinitions are loaded into ram.
Flutter 1.22 added icon tree shaking. This means unused icon "images" will be removed as well. However, this onlyapplies 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, completeform. This issue is beingtracked over in the flutter repository.
However, using the configurator, you can easily exclude styles from the package. For more information, seecustomizing font awesome flutter
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 cleanin your app directory - Deleting the app from your simulator / emulator / device
- Rebuild & Deploy the app.
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 usingFlutter 1.14.6 beta or newer!
About
The Font Awesome Icon pack available as Flutter Icons
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
