Use FontAwesome in a Xamarin.Forms app
I’m sure that most of you have heard about the language idiom “A picture is worth a thousand words”. With this in mind it is sometimes easier to show an icon instead of writing text. For example a plus icon is associated with adding a new item or a trash bin is associated with deleting something. In this article I want to show you how we can use FontAwesome in our Xamarin.Forms application. As the name suggests, FontAwesome is a font consisting of icons. Thus, numerous symbols can be used directly and since it is a font, color and size can be easily changed without loss.
Get the fonts
Since version 5 FontAwesome consists of three different fonts. I will demonstrate how can use all three fonts easily. For this we open the website fontawesome.com. In addition to a free version, there is also a paid version, which includes more icons. However, in this tutorial, I will be working with the free version, as it already provides a variety of icons.
We click on the button Start Using Free and get to the next step.
As we can see the projects focus is on web development, because we are promptly given an option to integrate the fonts into our own websites. However, since we need the font locally, we scroll down a bit and select the entry Desktop.
Here we find the actual download button and we save the ZIP file on our computer.
After unpacking the file, we find in the folder otfs the actual files that we need.
I renamed the files for simplicity and removed the spaces, as well as Free from the name. Thus we get the following three files.
Create the Xamarin.Forms app
Now we can create our Xamarin.Forms project. Then we need to copy the fonts to the platform-specific projects: on Android into the Assets folder with Build Action AndroidAsset, on iOS into the Resources folder with the Build Action BundleResource, and on UWP into the Assets folder with Build Action Content. We thus get the following structure:
On iOS, a change to the Info.plist file is required so that the added fonts can also be used. In order to edit the XML directly, we click with the right mouse button on the file Info.plist and select the entry XML (Text) Editor.
Above the closing dict-tag we add the following entries:
It should be noted here that the file name of the respective font matches the copied file, otherwise the font can not be found. Then we can save the file and also close it.
In order to be able to use the fonts, we can, for example specify the property FontFamily on a Label. However, the path to the font varies depending on the platform, so we create three resources in the App.xaml file that make our three fonts available. Thus we get the following structure:
Get the code for an icon
Before we can use the icons in our app, we have to pick the code for the icon on the FontAwesome website. Here you can find all icons, which are available in the free version. On the webistes left side you can also switch to the respective font Solid, Regular and Brands or you can use the search.
As soon as you have found the right icon, you can click on it to get to the detailed view. Here you will also find a code, e.g. f26e. you have to copy this now, because we need it in our app right away.
Use FontAwesome in a Xamarin.Forms app
We now create a Label in XAML and can fill the text accordingly with the code we just copied. However, we have to escape the code with . We also have to set the FontFamily, which in this case is FontAwesomeBrands.
Now we can launch the app on the different platforms. The following screenshot shows the UWP version, but the other two platforms behave analogously. Likewise, I have selected an example for each of the three fonts.
Use FontAwesomeIcons
This approach is not optimal. You first have to get the code from the website and then later in the actual XAML code you can not recognize what the actual icon represents. For this case, Metthew has provided a file in his GitHub repository, which contains all the codes of the FontAwesome icons and this file can be used directly by us. We download the file FontAwesomeIcons.cs and paste it into a new folder Utils.
Now we have to add the corresponding namespace to our page
and then we can access the icons and use them within our label. In the comment to each icon is also the information which font is necessary and whether the paid version of FontAwesome is needed.
I’ve shown you in this article, how we can integrate FontAwesome in our Xamarin.Forms App to get access to numerous icons in a few small steps. I have published a small example project on GitHub, so you can follow the steps easily.
Wrapping Up
This article is part of #XamarinMonth initiative started by Luis. You can also visit my blog tsjdev-apps.de to find more articles about Xamarin development or other interesting topics.
