FontAwesome in Xamarin Forms. Everything you need to know!!
Hello fellas,
Hope you all have a great day amidst the pandemic. Nothing gonna stop you from learning new until you stop it by yourself. Be positive and spread the love.
Let’s get into the chapter for the day, FontAwesome. FontAwesome is loved by most of the developers and designers all around the world where it meets most of the requirement. So let’s see how we can use FontAwesome in Xamarin Forms.
Download FontAwesome
Download the FontAwesome fonts in otf format from the official website.
click on start for free button and Click on Desktop from download options.
extract the folder and rename the otf files as the files names contains spaces. as to get rid off them i have renamed the otf files.
Everything is ready let’s play with Xamarin Forms.
Add resource files
Add the otf files inside the Assets folder of the android project and make sure the otf file build action is set to Android Assets.
Add the ots files inside Resources folder of the iOS project and make sure the build action is set to BundleResource.
For iOS need to add some additional data in info.plist. Open the info.plist and add the fonts values as array to use in the application with the new values as we renamed the files.
All set, Its time to use the font awesome in Xamarin Forms and play with it.
let’s add the resource file and load it in the App.xaml file so you no need to load in every page. One time load is enough to apply to any pages and get use of it. Xamarin Forms never been easier.
<?xml version=”1.0" encoding=”utf-8"?>
<Application xmlns=”http://xamarin.com/schemas/2014/forms" xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d=”http://xamarin.com/schemas/2014/forms/design" xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable=”d” x:Class=”XLFontAwesome.App”> <Application.Resources>
<ResourceDictionary>
<OnPlatform x:TypeArguments=”x:String”
x:Key=”FontAwesomeBrands”>
<On Platform=”Android”
Value=”fabrands.otf#Regular” />
<On Platform=”iOS”
Value=”FontAwesome5Brands-Regular” />
</OnPlatform>
<OnPlatform x:TypeArguments=”x:String”
x:Key=”FontAwesomeSolid”>
<On Platform=”Android”
Value=”fasolid.otf#Regular” />
<On Platform=”iOS”
Value=”FontAwesome5Free-Solid” />
</OnPlatform>
<OnPlatform x:TypeArguments=”x:String”
x:Key=”FontAwesomeRegular”>
<On Platform=”Android”
Value=”faregular.otf#Regular” />
<On Platform=”iOS”
Value=”FontAwesome5Free-Regular” />
</OnPlatform>
</ResourceDictionary>
</Application.Resources>
</Application>
Usage of Font Awesome in Xamarin Forms
Label element
Now the resources are added in App.xaml file and we can use it in the design to show some icons. Let’s do it,
<?xml version=”1.0" encoding=”utf-8"?>
<ContentPage xmlns=”http://xamarin.com/schemas/2014/forms" xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d=”http://xamarin.com/schemas/2014/forms/design" xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable=”d” x:Class=”XLFontAwesome.MainPage”>
<StackLayout HorizontalOptions=”Center” VerticalOptions=”Center”>
<! — Place new controls here →
<Label Text=””
FontFamily=”{StaticResource FontAwesomeRegular}” FontSize=”30" /><Label Text=””
FontFamily=”{StaticResource FontAwesomeBrands}” FontSize=”30" /><Label Text=””
FontFamily=”{StaticResource FontAwesomeSolid}” FontSize=”30" />
</StackLayout>
</ContentPage>
I have placed the Font Awesome as Label text as its a font so it can be used as text and can have text attributes.
Image element
We can use font awesome in XF image element as well. Refer below for how to use it in image element,
<Image >
<Image.Source>
<FontImageSource Glyph=”” FontFamily=”{StaticResource FontAwesomeRegular}” Color=”Blue”></FontImageSource>
</Image.Source>
</Image>Shell tab
XF has a fantastic option to have bottom bar and flyout options easily and call it as Shell. I am going to add the icon to bottom bar using Shell.
<Tab Title=”Page1">
<Tab.Icon>
<FontImageSource Glyph=”” FontFamily=”{StaticResource FontAwesomeRegular}” Color=”LightGoldenrodYellow”></FontImageSource>
</Tab.Icon>
<ShellContent>
<views:MainPage />
</ShellContent>
</Tab>Bingo guys its awesome right. Font awesome in Xamarin Forms. Never been easier. Below you can check font awesome in Xamarin Forms in action.
Problem
iOS is showing question marks when use font awesome.
When we use font awesome some times iOS device will result in like below with question marks.
Well don’t panic its just a name issue of otf files. You remember that we have renamed the otf file names when we extracted the fonts.
Even though we don’t rename the otf files we should be aware that when ussing it in ios we should use postscript name of the file. iOS doesnt care about the file name its concern is all about the postscript name of the file.
If you remember we defined the font awesome resources in App.xml file like below. Where does these names comes from.
<ResourceDictionary>
<OnPlatform x:TypeArguments=”x:String”
x:Key=”FontAwesomeBrands”>
<On Platform=”Android”
Value=”fabrands.otf#Regular” />
<On Platform=”iOS”
Value=”FontAwesome5Brands-Regular” />
</OnPlatform>
<OnPlatform x:TypeArguments=”x:String”
x:Key=”FontAwesomeSolid”>
<On Platform=”Android”
Value=”fasolid.otf#Regular” />
<On Platform=”iOS”
Value=”FontAwesome5Free-Solid” />
</OnPlatform>
<OnPlatform x:TypeArguments=”x:String”
x:Key=”FontAwesomeRegular”>
<On Platform=”Android”
Value=”faregular.otf#Regular” />
<On Platform=”iOS”
Value=”FontAwesome5Free-Regular” />
</OnPlatform>
</ResourceDictionary>Well install the font in mac machine and open the font info and you can find the postscript name of the font file.
This name should be used here. If you place the name of the file it wont work and you can see only question marks. Make sure you place the correct name here.
Rest is all same and good to go. Cheers. You can find the source code here in Github. Please feel free to use it according to your requirements. Xamarin Forms never been easier.
