The Font Awesome Icon Pack Available As Flutter Icons
font_awesome_x
**
Newly released package for learning purposes
**
The free & pro Font Awesome Icon pack available
as set of Flutter Icons - based on font awesome version 6.4.0.
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_x: <latest_version>
Usage
import 'package:font_awesome_x/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 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
...
Enable pro icons
is pro
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
...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_x/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 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
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
Use this package as a library
Depend on it
Run this command:
With Flutter:
$ flutter pub add font_awesome_xThis will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):
dependencies:
font_awesome_x: ^10.5.1Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:font_awesome_x/font_awesome_flutter.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_x_example/icons.dart';
import 'package:font_awesome_x/font_awesome_flutter.dart';
void main() {
runApp(const FontAwesomeGalleryApp());
}
class FontAwesomeGalleryApp extends StatelessWidget {
const FontAwesomeGalleryApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Font Awesome Flutter Gallery',
theme: ThemeData.light().copyWith(
iconTheme: const IconThemeData(size: 36.0, color: Colors.black87),
textTheme: const TextTheme(
bodyMedium: TextStyle(fontSize: 16.0, color: Colors.black87),
),
),
home: const FontAwesomeGalleryHome(),
);
}
}
class FontAwesomeGalleryHome extends StatefulWidget {
const FontAwesomeGalleryHome({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() => FontAwesomeGalleryHomeState();
}
class FontAwesomeGalleryHomeState extends State<FontAwesomeGalleryHome> {
var _searchTerm = "";
var _isSearching = false;
@override
Widget build(BuildContext context) {
final filteredIcons = icons
.where((icon) =>
_searchTerm.isEmpty ||
icon.title.toLowerCase().contains(_searchTerm.toLowerCase()))
.toList();
return Scaffold(
appBar: _isSearching ? _searchBar(context) : _titleBar(),
body: Scrollbar(
thumbVisibility: kIsWeb,
child: GridView.builder(
itemCount: filteredIcons.length,
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 300,
),
itemBuilder: (context, index) {
final icon = filteredIcons[index];
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute<void>(
builder: (BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Container(
color: Colors.white,
alignment: Alignment.center,
child: Hero(
tag: icon,
child: FaIcon(
icon.iconData,
size: 100,
),
),
),
);
},
),
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Hero(tag: icon, child: FaIcon(icon.iconData)),
Container(
padding: const EdgeInsets.only(top: 16.0),
child: Text(icon.title),
)
],
),
);
},
),
),
);
}
AppBar _titleBar() {
return AppBar(
title: const Text("Font Awesome Flutter Gallery"),
actions: [
IconButton(
icon: const FaIcon(FontAwesomeIcons.magnifyingGlass),
onPressed: () {
ModalRoute.of(context)?.addLocalHistoryEntry(
LocalHistoryEntry(
onRemove: () {
setState(() {
_searchTerm = "";
_isSearching = false;
});
},
),
);
setState(() {
_isSearching = true;
});
})
],
);
}
AppBar _searchBar(BuildContext context) {
return AppBar(
leading: IconButton(
icon: const FaIcon(FontAwesomeIcons.arrowLeft),
onPressed: () {
setState(
() {
Navigator.pop(context);
_isSearching = false;
_searchTerm = "";
},
);
},
),
title: TextField(
onChanged: (text) => setState(() => _searchTerm = text),
autofocus: true,
style: const TextStyle(fontSize: 18.0),
decoration: const InputDecoration(border: InputBorder.none),
),
);
}
} Download details:
Author: fluttercommunity
Source: https://github.com/fluttercommunity/font_awesome_flutter
