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.
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.
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.
After extracting the icons, copy the .otf files you saw in the previous step and add them to the following folders.
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.
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.
<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.Follow me on social media and stay updated
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.
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.
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