Enable Dark Mode!
how-to-use-font-awesome-icons-in-flutter.jpg
By: Megha AP

How to Use Font Awesome Icons in Flutter

Technical Flutter

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


If you need any assistance in odoo, we are online, please chat with us.



0
Comments



Leave a comment

 


whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

London

Cybrosys Limited
Alpha House,
100 Borough High Street, London,
SE1 1LB, United Kingdom

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message