Hello!, those who are used to reading my articles will surely be surprised. 😱 I’ve never written any article about flutter. Above all, I’ve always been an advocate of Xamarin & MAUI… What happened? 😅 well, though I never mentioned it on my blog, I’ve been using Flutter. And I have to admit, flutter is awesome! It is a lot more robust than MAUI and Xamarin. Today, I’ll show you how to use FontAwesome Pro Icons in Flutter.
Let’s Dive in
I wanted to add fontawesome pro icons to a Flutter app and noticed there are some packages to do that, but those packages only manage the free version of fontawesome. So, people online have been using several alternative methods to make these icons show in their apps. I didn’t see anybody using the method I’m about to show you.
First, let’s go from first principles, FontAwesome icons are just fonts! and you can use them without extracting SVGs or PNGs from them. You can use them just as what they are, fonts. Let me explain in a few steps. It will be fast, promise.
If you find this article useful, please follow me on Twitter,  Github, Linkedin, or like my Facebook page to stay updated.Follow me on social media and stay updated
1- Adding FontAwesome as a Font
Download the FontAwesome pro .otf file from your FontAwesome dashboard. Then add it to your flutter project as you’d do for any other font. This documentation will guide you. This is what it looks like in the pubspec.yml file.
1 2 3 4 5 6 7 | flutter: fonts: - family: FontAwesome fonts: - asset: lib/assets/fonts/FontAwesome6ProLight.otf |
2- Get the Codes for the Icons You Wish to Use in Your App
Once you get to the fontawesome website, search for the icons you want to display, and get their unicode. Here is a screenshot of an icon I selected.
As you can see, I chose the Magnifying glass, and its Unicode is f002. I could also choose another icon, like the plus sign, with code: 2b.
3- Make Dart Understand Your Icon’s Unicode Characters
Using these codes as they are will not help us in any way. What we must do is add some sort of encoding, before using them in our UI. To do this, create a variable or a class with dart and just add a “\u” in front of the Unicode characters. Here are a few examples:
1 2 3 4 | static const String fontAwesomeBooks = "\uf5db"; static const String fontAwesomeMagnifyingGlassPlus = "\uf00e"; static const String fontAwesomeBookArrowUp = "\ue0bd"; static const String fontAwesomePlus = "\u002b"; |
If you find this article useful, please follow me on Twitter,  Github, Linkedin, or like my Facebook page to stay updated.
Follow me on social media and stay updated
4- Use The Icons
The final step, use the icons in your app’s UI. Remember what we said in the beginning, FontAwesome icons are just fonts! So, we can use them as text, and change their color, increase their font size, etc… We will do just that now! As simple as that. Below is an example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | class HomeScreen extends BaseScreen { const HomeScreen({super.key}); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text("Font Awesome!!!"), Text( appsettings.appName, style: const TextStyle(fontFamily: "OpenSans"), ), const Text( FontAwesomeIcons.fontAwesomeAddSquare, style: TextStyle( fontFamily: "FontAwesome", color: Colors.red, fontSize: 50,), ), ], ),),); } } |
Above, I made a screen with a text widget that contains the font icon. If you do the same in your app and run it, you’ll see the font icon. You can do the same with every icon you need, and just change the colors and sizes whenever you need to.
Conclusion
No Package needed, just a few lines of code and you have the flexibility of font icons in your hands. I hope you found this helpful. Please follow me on social media if you like my articles or any other content I create. Thanks for reading, and see you in the next article.
Follow me on social media and stay updated