Using FontAwesome in Xamarin.Forms

Font Awesome 5 is a really great way to add vector icons to your Xamarin.Forms app. Using a graphic font instead of icon images saves a lot of time and effort. Font-based icon sets can be colored and sized quickly without having to update a bunch of image icons in each of your platform projects.

The following shows styles for BUTTONS and LABELS for both regular and brands ttf files for Font Awesome 5. These two sets are in the FREE download for FontAwesome. There are a bunch more fun icons in the paid pro version. This code goes in your Xamarin.Forms core project’s App.xaml file:

 <Application.Resources>
        <ResourceDictionary>
            <Style x:Key="FA.Regular.LabelStyle"  TargetType="Label">
                <Setter Property="FontFamily">
                    <Setter.Value>
                        <OnPlatform x:TypeArguments="x:String"
                                    Android="fa-regular-400.ttf#Font Awesome 5 Free Regular"
                                    iOS="Font Awesome 5 Free"
                                    WinPhone="Assets/fa-regular-400.ttf#Font Awesome 5 Free" />
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="FA.Regular.ButtonStyle"  TargetType="Button">
                <Setter Property="FontFamily">
                    <Setter.Value>
                        <OnPlatform x:TypeArguments="x:String"
                                    Android="fa-regular-400.ttf#Font Awesome 5 Free Regular"
                                    iOS="Font Awesome 5 Free"
                                    WinPhone="Assets/fa-regular-400.ttf#Font Awesome 5 Free" />
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="FA.Brands.LabelStyle"  TargetType="Label">
                <Setter Property="FontFamily">
                    <Setter.Value>
                        <OnPlatform x:TypeArguments="x:String"
                                    Android="fa-brands-400.ttf#Font Awesome 5 Brands Regular"
                                    iOS="Font Awesome 5 Brands"
                                    WinPhone="Assets/fa-brands-400.ttf#Font Awesome 5 Brands" />
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="FA.Brands.ButtonStyle"  TargetType="Button">
                <Setter Property="FontFamily">
                    <Setter.Value>
                        <OnPlatform x:TypeArguments="x:String"
                                    Android="fa-brands-400.ttf#Font Awesome 5 Brands Regular"
                                    iOS="Font Awesome 5 Brands"
                                    WinPhone="Assets/fa-brands-400.ttf#Font Awesome 5 Brands" />
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Application.Resources>

For iOS, you will also need to add the following to your info.plist:

<key>UIAppFonts</key>
<array>
    <string>fa-regular-400.ttf</string>
    <string>fa-brands-400.ttf</string>
</array>

For iOS, you will also need to add the .ttf files to the Resources folder of your iOS project. Make sure the build action is set as shown below:

For Android, you will need to add the .ttf files to the Assets folder. Make sure the build action is set as shown below:

For UWP, you will need to add the .ttf files to the Assets folder. Make sure the build action is set as shown below:

Then, to use it in your XAML Content Page… The following example also shows the branding colors for each of the three brands, so they display in the app appropriately.
https://fontawesome.com/icons/facebook-square?style=brands

<StackLayout Orientation="Horizontal">
     <Label x:Name="FacebookIcon" Style="{StaticResource FA.Brands.LabelStyle}" Text=""
              HeightRequest="100" TextColor="#3b5998" FontSize="42">
        <Label.GestureRecognizers>
          <TapGestureRecognizer Command="{Binding FacebookCommand}" />
        </Label.GestureRecognizers>
     </Label>
     <Label x:Name="TwitterIcon" Style="{StaticResource FA.Brands.LabelStyle}" Text=""
              HeightRequest="100" TextColor="#00aced" FontSize="42">
        <Label.GestureRecognizers>
           <TapGestureRecognizer Command="{Binding TwitterCommand}" />
        </Label.GestureRecognizers>
     </Label>
     <Label x:Name="SlackIcon" Style="{StaticResource FA.Brands.LabelStyle}" Text=""
              HeightRequest="100" TextColor="#3F0F3F" FontSize="42">
        <Label.GestureRecognizers>
           <TapGestureRecognizer Command="{Binding SlackCommand}" />
        </Label.GestureRecognizers>
     </Label>
 </StackLayout>

What does the end result look like?

If you want to reference the unicode from your App.xaml code as a StaticResource, you could do it like this:

<x:String x:Key="FontAwesomeFacebook"></x:String>
<x:String x:Key="FontAwesomeTwitter"></x:String>
<x:String x:Key="FontAwesomeSlack"></x:String>

And if you wanted to do it like that, you would reference it like this in your content page’s XAML:

<Label x:Name="SlackIcon" Style="{StaticResource FA.Brands.LabelStyle}" 
              Text="{StaticResource FontAwesomeSlack}"
              HeightRequest="100" TextColor="#3F0F3F" FontSize="42">
        <Label.GestureRecognizers>
           <TapGestureRecognizer Command="{Binding SlackCommand}" />
        </Label.GestureRecognizers>
     </Label>

Pro Tip:

Balsamiq Mockups has a great tool for mocking up phone and tablet apps. They have incorporated the older version of FontAwesome icons (4.7) in Balsamiq mockups and they have plans to upgrade to the newer FontAwesome 5.0. Now, that is Awesome.

1 thought on “Using FontAwesome in Xamarin.Forms”

Leave a Comment

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