Damir's Corner.

Using Font Awesome in Xamarin.Forms

Font Awesome is a great collection of icons packaged in a font file. While the official site has detailed documentation for using the icons on the web. There's much less guidance available for using them in a mobile application. There are multiple blog posts about using them or other custom fonts in a Xamarin.Forms application. But at the rate Xamarin.Forms are evolving, none of them is fully accurate anymore. So I decided to document the steps I followed to get it working in my project.

Since Xamarin.Forms 4.5, the process of using custom fonts in a Xamarin.Forms application has been simplified a lot:

1. Download the font file. There are three .otf files in the package. The one containing the icon you want to use is listed on the icon page in the icon gallery:

   

2. Place the font file in the shared project (e.g in the Resources/Fonts folder) and set its Build Action to Embedded resource.

3. Add the assembly-level ExportFont attribute to any source file in the project. AssemblyInfo.cs is a good choice:

   [assembly: ExportFont("FontAwesome5Regular.otf", Alias = "FontAwesome5Regular")]
   

4. Use the icons as the source for Image or ImageButton view:

   <Image>
     <Image.Source>
       <FontImageSource FontFamily="FontAwesome5Regular"
                        Color="Black"
                        Glyph="&#xf164;"/>
     </Image.Source>
   </Image>
   

The FontFamily must be set to the Alias value from the ExportFont attribute. The Glyph value is the XML entity notation for the corresponding Unicode character (listed on the icon page).

You probably won't recognize the icon by looking at its Unicode value. To make the XAML markup more readable, you can take advantage of Font Awesome T C# (fa2cs). By including a source code file from the repository in your project, you will be able to access icons by string constants instead:

<Image>
  <Image.Source>
    <FontImageSource FontFamily="FontAwesome5Regular"
                     Color="Black"
                     Glyph="{x:Static fontAwesome:FontAwesomeIcons.ThumbsUp}"/>
  </Image.Source>
</Image>

For this to work, don't forget to declare the namespace at the top of the XML file:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:fontAwesome="clr-namespace:FontAwesome"
             x:Class="FontAwesome.MainPage">

You can find a sample project displaying a single Font Awesome icon on a page using this approach in my GitHub repository.

In recent versions of Xamarin.Forms it became much easier to use custom fonts. They only need to be embedded in the shared project and can be referenced by their alias without the need for platform-specific resources. A file with string constants can further simplify the referencing of individual icons in a font file.