Hello friends, as mobile or desktop app developers, I’m sure you have faced several difficulties with icons. I mean finding a uniform set of icons. Beautiful icons. Icons with colors which could be customized and sizes changed at your will. Well, if you were looking for a solution to this, then stop searching. You have found it now.
With Font Awesome 5, you have hundreds of free icons available to you. Though these icons are not all free, most of what you may need surely are free. Using Font Awesome with Xamarin Forms. This will save you time by providing you a set of icons which could be customized (size, color, font weight…).
There may be several posts online about this topic. But most of them may be quite confusing. I say so because I have gone through many of them that is why I decided to make a better post, which will provide a maximum of details on Font Awesome 5 Xamarin Forms.
What we will be doing
- We will get Font Awesome icons
- Add the icons to our Xamarin.Forms Project
- Learn how to add it simply to our XAML (No Custom Renderer or platform specific stuff).
- Trouble shoot issues which may cause icons not to appear
Let’s dive in how into Font Awesome 5 Xamarin Forms
Before we get started, I want to mention that we will not need platform specific code. I mean, if you go round the internet. You may find a few posts about Font Awesome 5 Xamarin Forms which will require custom renderers or platform specific code. We will not use this approach. We will do everything in the shared code’s XAML.
Let’s get Font Awesome 5 Icons
Getting Font Awesome 5 icons is easy. You just need to go to this link and download it. Then you extract it and open the folder location (use-on-desktop) and you will find files with the .otf extension. Once you do this, you can move to the next step.
Adding the icons to our Xamarin.Forms Project
After extracting the icons, copy the .otf files you saw in the previous step and add them to the following folders.
- Android : in your project, go to the Assets folder and paste them there,
- UWP : Enter your Assets folder too and add it there
- iOS : Adding to the iOS project is a little bit more complicated. Here is how it is done.
#update
In your iOS project, you have the info.plist file, in which you will add a reference to the font awesome icon files. Here is an example of how it is done :
<array> <string>Font Awesome 5 Brands-Regular-400.otf</string> <string>Font Awesome 5 Free-Regular-400.otf</string> <string>Font Awesome 5 Free-Solid-900.otf</string> </array>
After doing this
Here is the source code for this demo.
Using the Fonts in our app
Now that you have added the Font Awesome 5 icons to your projects, we can start using them in our code. This is just easy.
- You just have to go to the font awesome website and get the code for a font icon you wish to use.
- Set the Text Property of a Label, or any control containing text to be this series of character (&#x) Followed by those you got from the website in step 1, and followed again by a semi colon (;) an example of this is ()
- Set the Font Family properties of the controls as follows ;
<Label Text=""
FontSize="50"
TextColor="SkyBlue"
VerticalOptions="Center"
HorizontalOptions="Center" >
<Label.FontFamily>
<OnPlatform
x:TypeArguments="x:String"
Android="Font Awesome 5 Free-Regular-400.otf#Font Awesome 5 Free Regular"
iOS="Font Awesome 5 Free"
WinPhone="Assets/Font Awesome 5 Free-Regular-400.otf#Font Awesome 5 Free" />
</Label.FontFamily>
</Label>As shown above, you can even specify the icon’s size and color using FontSize and TextColor Properties.
This Xamarin Forms application to help you manage your expenses and income was built entirely with Xamarin Forms and ReactiveUI. You can download and use it or play with it for free on Android and Windows 10 (Universal Windows Platform). You can get it on Playstore, or on the Microsoft Store.
Trouble Shooting
You may not be able to make your icons show, or just a few icons may not show. Here are the possible reasons and solutions.
- Your icons may not appear on UWP or throw an exception on Android because you didn’t specify the font styles properly. For example, defining the fonts on ios is easy, since you just use the font name (iOS=”Font Awesome 5 Free” ) While on android and UWP, you need to declare the font file. Then add a # before precising the Font’s name. (Android=”Font Awesome 5 Free-Regular-400.otf#Font Awesome 5). (WinPhone=”Assets/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free”). So if your Fonts are not in the Assets folder as we put it in this tutorial, In UWP, precise the sub directory under Assets where they are found e.g (WinPhone=”Assets/Fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free”). But on android, you should set the Fonts directly in the Assets folder.
- The extension should be taken note of. Here, the fonts have a .otf extension instead of .ttf extension. and the icons will not display if the extension is wrongly stated when it is supposed to.
- On iOS, solid icons may not display till you precise set the Label’s FontAttributes to Bold.
- Only some of the icons do not show no matter how well precise the Font Family in Xaml. Well, since in this tutorial, we are using the free Font Awesome 5 icons, not all of them are available. I mean that, under the solid font awesome icons, some icons are present but absent in regular. as shown below;
Some icons are available as Regular in the free tier, and others are available as Solid only instead, and so on… So if an icon is not being displayed, go the font awesome website and verify where it is available in the free tier. and when you get this, go to your code and apply the regular or solid font families appropriately as follows :
<OnPlatform x:TypeArguments="x:String" Android="Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid" iOS="Font Awesome 5 Free" WinPhone="Assets/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free" /> <OnPlatform x:TypeArguments="x:String" Android="Font Awesome 5 Free-Regular-400.otf#Font Awesome 5 Free Regular" iOS="Font Awesome 5 Free" WinPhone="Assets/Font Awesome 5 Free-Regular-400.otf#Font Awesome 5 Free" />
Here is the source code for this demo.
Conclusion
With this, everything should work just fine and you should be able to use the Font awesome 5 icons on Xamarin.Forms. And the result should look like this below.
You could also look at this post about 10 challenges Xamarin.Forms beginners face and possible solutions.
If you liked this post, or it was useful to you, please 👍 like it, share it on twitter, facebook or other social media… in case you want to get updated on any new useful post, follow me on twitter and like my page on facebook.
Follow me on social media and stay updated