Telerik blogs
fontawesome-fonts_870x220

There are many examples of using custom fonts in your Xamarin.Forms apps floating around the Internet. But like time, technology marches on and some recent changes have made it a little more difficult, so I thought I'd take a few minutes to show you how to use the latest FontAwesome fonts into Xamarin.Forms 2.5.

FontAwesome Image 1

FontAwesome is a custom font set that has symbols that replace normal text characters and provide (predominately) web developers with easy to use iconography for buttons. For web use, FontAwesome offers easy to use CSS/Less and JavaScript features that make showing a search icon as easy as adding a <i class="fa fa-search" /> element. But underneath all of the web tricks is a collection of TrueType and OpenType fonts that can be used in any application.

FontAwesome version 5 is divided into a Free tier that includes 946 icons and a Pro version that has another 1535 icons. This is a departure from the 4.7 version where all of the icons were contained in a single font file and they were all available for free. The version 5 free files are split between 3 font files:

  • fa-brands-400.ttf/otf
  • fa-regular-400.ttf/otf
  • fa-solid-900.ttf/otf

You can learn more about FontAwesome and download the font files along with the accompanying CSS/Less files at https://fontawesome.com/. The files we'll be using in this demo are located in the fontawesome-free-5.0.8\web-fonts-with-css\webfonts directory.

Adding FontAwesome Files to Your Platform Projects

FontAwesome Image 2 FontAwesome Image 3 FontAwesome Image 4

I'm going to be using icons from the fa-regular-400.ttf type font, so the first thing you have to do is to add the TrueType file to each of your platform specific projects in Visual Studio. For Android and UWP, you add the file under your Assets directory. For iOS, add it to your Resources directory. Add the file by right-clicking on the folder and selecting "Add Existing Item," locate the file and it will be added to the project.

The next step is to make sure that the Build Action is set properly. For Android, the Build Action should be set to "AndroidAsset," for iOS set it to "BundledResource," and finally for UWP set it to "Content" and set the Copy to Output Directory "Copy always."

Using the Font in Your Xamarin.Forms User Interface

Now that that fonts are added to your respective platform projects, using it in Xamarin.Forms is easy, if not altogether straight forward. This is due to the differences in how assets/resources are referenced by platform and by the naming structure of the new FontAwesome files.

<Button Text="&#xf11a;" HeightRequest="100" BackgroundColor="DarkRed" TextColor="White" FontSize="36">
  <Button.FontFamily>
    <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" />
  </Button.FontFamily>
</Button>
<Label Text="&#xf11a;" HeightRequest="100" BackgroundColor="White" TextColor="Black" FontSize="36">
  <Label.FontFamily>
    <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" />
  </Label.FontFamily>
</Label>

The XAML above shows a button and a label that display the FontAwesome "meh" icon. In order to use the custom font you have to specify the FontFamily attribute. The format for this attribute is different for each platform.

  • Android: <filename>#<font name with style (Regular in this case)>
  • iOS: <font name>
  • UWP: <filename>#<font name without style>

Each icon in the FontAwesome library has a Unicode value associated with it. The "meh" icon above uses Unicode character, f11a. This is represented in C# code via \fu11a; and in XAML via &#xf11a. Find the Unicode characters for each icon on the FontAwesome site.

That's all there is to it. Here's what it looks like in the apps.

FontAwesome Image 6 FontAwesome Image 7 FontAwesome Image 8

Icon Sizing

Many of the features of the FontAwesome library are actually implemented by CSS, including the ability to specify a size multiplier such as fa-9x. While these features aren't supported in the app itself, you can simply increase the size of your text using the FontSize attribute.

Animations

There are some popular libraries that allow you to add animations to your application, such as Font Awesome Animation. These libraries also use CSS but the functionality can easily be duplicated using Xamarin Forms ViewExtensions class animations. For example the following code will rotate the object containing the FontAwesome object 180 degrees:

await this.AwesomeText.RotateTo(180, 2000);

FontAwesome Image 9

You can get all the source code here.

Happy coding!

(Header image courtesy of FontAwesome's free gallery)


Paul Ballard
About the Author

Paul Ballard

Paul Ballard is a software architect and technologist with more than 30 years of experience leading teams and building software for small and large companies around the globe.  From award winning enterprise grade systems to mobile and cloud based solutions, he’s led teams in building the software that powers some of the best organizations in the world. Paul is also an avid supporter of the developer community and a former Microsoft MVP.

Related Posts

Comments

Comments are disabled in preview mode.