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… This example shows how to display a clickable label for Facebook, Twitter and Slack in a XAML content page. For each label, set the Style property to reference the styles in your App.xaml and set the Text property to reference the unicode character in FontAwesome. Notice that on the FontAwesome website, they will list the unicode as “f082” and when you reference it from XAML, it needs to have a prefix of “&#x”, so altogether it will be Text=”&xf082″. 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.

Using FontAwesome in Xamarin.Forms

1 thought on “Using FontAwesome in Xamarin.Forms”

Leave a Comment Cancel Reply

–