Mobile apps need icons! Read on to learn how to add Font Awesome’s rich selection to your Forms App!
There are lots of (now outdated) guides online for adding Font Awesome icons to your Xamarin Forms app. As of Forms 4.5.530, the team introduced a much easier way with Embedded Fonts! No longer is any platform-specific configuration needed, nor any additional libraries. This method will just work for iOS, Android, and UWP. The devblog was great, but didn’t specifically mention Font Awesome - so hereeee we go!
Get the Latest FontAwesome
The only file I ended up using from the zip was
webfonts/fa-solid-900.ttf, but you can follow this process to add several different font families if you so choose.
Add the Font to your project
I’d suggest hopping over to the official devblog post for this part. It’s really simple though: (1) Ensure you’re running Forms 4.5+, (2) Copy the
ttf file from above anywhere in the shared project, and mark it as
EmbeddedResource, and (3) Add this line to your
using Xamarin.Forms; ... [assembly: ExportFont("fa-solid-900.ttf", Alias = "FontAwesome")]
Using the Font
You can select which icon you’d like to use by copying the unicode value from the cheatsheet. Note that here i’m looking at the FontAwesome “solid” cheatsheet, to match the font family ttf I chose above.
For example, I wanted a circular “reload” arrow icon for my app. I found
undo from the cheatsheet with the unicode value
You use the
Label control with the “Text” value respresenting the unicode value of the icon you’d like to use. You’ll need to append
&#x and then end your value with a
;. Like so:
<Label x:Name="RefreshLabel" Text="" FontSize="18" FontFamily="FontAwesome" />
Reload your app and you should see your icon!
Bonus: Make the icon tappable
I added this piece of the code to the constructor of my codebehind file to run code on a tap of the icon. The
x:Name names my label above and makes it addressable in my codebehind.
var refresh = new TapGestureRecognizer(); refresh.Tapped += async (s, e) => await DoRefresh(); RefreshLabel.GestureRecognizers.Add(refresh);