0

Xamarin.Forms: Icon Fonts

Added back in Xamarin.Forms 3.6 I somehow missed the addition of the new FontIconSource which allows the use of font icons such as FontAwesome. You can now use font icons in pretty much any element that accepts text or an image. Today I am going outline the steps needed to get up and running with this awesome feature on Android and iOS!

Importing the font

First off, download the Material Design Icons font and grab the materialdsignicons-webfont.ttf file from the Fonts folder. As each platform has its own way of importing custom fonts follow the steps below:

Android

For Android add the .ttf file to the Assets folder making sure that the build action for the file is set to AndroidAsset

iOS

For iOS add the .ttf file to the Resources folder making sure that the build action for the file is set to BundleResource. After adding the font you’ll need to update the Info.plist so that the app can use the custom font:

Getting the glyph codes

Now, before we can use the font we need to find out the specific character codes for each icon in the font that we want to use. While reading up on using icon fonts I came across a post by James Montemagno that points to a tool by Andrei Nitescu, called IconFont2Code. IconFont2Code will allow you to generate a C# class file that contains all the Unicode values for any characters that you select, all you need to do is upload the font!

iconfont2code

Once you have selected the required character codes copy the generated class into your project.

Using the font

To prevent having to repeatedly writing the same code the best way to use an imported font to is to set up a resource within the application’s resource dictionary that can be reused across the app.

Now that we have everything in place we can finally use the icon font! We can use any element that has a FontFamily property associated with it and set the Text property. There are a few different ways of accessing the icons so lets take a look:

XAML x:Static

To use a static reference to the icon you need to add the relevant namespace to the page e.g. xmlns:consts="clr-namespace:XF.Shell.Constants". Once this is done you should be able to access the class that you added to the project earlier within XAML using x:Static:

XAML Binding

In order to use bindings you need to create a view model that exposes the icon that will be bound to the UI element:

Make sure to set the BindingContext in the constructor of your page:

Then simply set up a binding in the same way you would with any other property:

Images

If you want to use a font icon with an image based element you should use a FontImageSource.

That’s it! You should now be able to use Icon Fonts with a Xamarin.Forms app. Feel free to check out the sample project below where I will be covering all the new features introduced in Xamarin.Forms 4.0!

Screenshots

Links

Chris Howarth

Senior Xamarin Developer @ REPL Digital

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.