Xamarin fontawesome icons displayed as square with x - xamarin

Question

After following some tutorials to include FontAwesome 5 Free in my Xamarin project it always ends up showing as a square with an x inside.
I think this is probably related to my xamarin.forms version (2.3.0.46-pre3) and i can't seem to make it work.
Here's the file names
Build action is set to AndroidAsset and copy if newer and BundleResource for IOS
Xaml where im using them
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TrainInURL.MainPage">
<Grid >
<Image Source="bg_home.png" VerticalOptions="Start" HorizontalOptions="Center"/>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" Margin="10" Padding="10" >
<Label Text="Bienvenid#" TextColor="White" Font="Bold,16"></Label>
<Label Text="" TextColor="White" FontFamily="{StaticResource FontAwesomeSolid}"/>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" Margin="10" Padding="10" >
<Label x:Name="txt_Nombre" TextColor="White" Font="Bold,16"></Label>
<Label x:Name="txt_Apellido" TextColor="White" Font="Bold,16"></Label>
<Label x:Name="lblMensaje" HorizontalTextAlignment="Center"></Label>
</StackLayout>
<StackLayout >
</StackLayout>
</StackLayout>
</Grid>
</ContentPage>
App.xaml
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TrainInURL.App">
<Application.Resources>
<ResourceDictionary>
<OnPlatform x:Key="FontAwesomeSolid" x:TypeArguments="x:String"
iOS="Font Awesome 5 Free Solid"
Android="FontAwesomeSolid.ttf#Font Awesome 5 Free Solid" />
<OnPlatform x:Key="FontAwesomeRegular" x:TypeArguments="x:String"
iOS="Font Awesome 5 Free Regular"
Android="FontAwesomeRegular.ttf#Font Awesome 5 Free Regular" />
<OnPlatform x:Key="FontAwesomeBrands" x:TypeArguments="x:String"
iOS="Font Awesome 5 Free Brands"
Android="FontAwesomeBrands.ttf#Font Awesome 5 Free Brands" />
</ResourceDictionary>
<!-- Application resource dictionary -->
</Application.Resources>
</Application>
info.plist
<key>UIAppFonts</key>
<array>
<string>FontAwesomeSolid.ttf</string>
<string>FontAwesomeRegular.ttf</string>
<string>FontAwesomeBrands.ttf</string>
</array>
Is it even possible to use custom fonts with my version? Any help is welcomed
Update 1: Updated to version 2.5.1.527436, same issue
Update 2: Tried using a different font file, seems to indicate it can find the font but can't render it. Using the following font renderer gave the following results
CustomFontRenderer
[assembly: ExportRenderer(typeof(CustomFontLabel), typeof(CustomFontRenderer))]
namespace TrainInURL.Droid
{
public class CustomFontRenderer : LabelRenderer
{
public CustomFontRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
TextView label = (TextView) Control;
if (e.NewElement?.FontFamily != null)
{
Typeface font = null;
// the try-catch block will ensure the element is at least rendered with default
// system font in Xamarin Previewer instead of crashing the view
try
{
font = Typeface.CreateFromAsset(Android.App.Application.Context.Assets, e.NewElement.FontFamily);
}
catch (Exception)
{
font = Typeface.Default;
}
label.Typeface = font;
}
}
}
}
Xaml
<StackLayout Orientation="Horizontal" Margin="10" Padding="10" >
<Label Text="Bienvenid#" TextColor="White" FontSize="16" FontAttributes="Bold"></Label>
<Label Text="" TextColor="White" FontFamily="{StaticResource FontAwesomeSolid}"/>
<Label Text="" TextColor="White" FontFamily="{StaticResource FontAwesomeBrands}"/>
<Label Text="" TextColor="White" FontFamily="{StaticResource FontAwesomeRegular}"/>
<trainInUrl:CustomFontLabel Text="" FontFamily="{StaticResource FontAwesomeSolid}"/>
<trainInUrl:CustomFontLabel Text="" FontFamily="{StaticResource FontAwesomeBrands}"/>
<trainInUrl:CustomFontLabel Text="" FontFamily="{StaticResource FontAwesomeRegular}"/>
</StackLayout>
Result

Answer 1

I followed the instructions found here which got me started. there was also a bit of further tweaking to completely get it working (particularly UWP). I do note you are using the .ttf files and I am using the .otf files, which could be an issue.
My final final assets folder and resource implementation are below (android - no IOS here), hopefully helps you out.
<Application.Resources>
<ResourceDictionary>
<OnPlatform x:TypeArguments="x:String" x:Key="FontAwesomeBrands">
<On Platform="Android" Value="FontAwesome5Brands400.otf#Regular"/>
<On Platform="UWP" Value="/Assets/Fonts/FontAwesome5Brands400.otf#Font Awesome 5 Brands"/>
</OnPlatform>
<OnPlatform x:TypeArguments="x:String" x:Key="FontAwesomeSolid">
<On Platform="Android" Value="FontAwesome5Solid900.otf#Regular"/>
<On Platform="UWP" Value="/Assets/Fonts/FontAwesome5Solid900.otf#Font Awesome 5 Free"/>
</OnPlatform>
<OnPlatform x:TypeArguments="x:String" x:Key="FontAwesomeRegular">
<On Platform="Android" Value="FontAwesome5Regular400.otf#Regular"/>
<On Platform="UWP" Value="/Assets/Fonts/FontAwesome5Regular400.otf#Font Awesome 5 Free"/>
</OnPlatform>
</ResourceDictionary>
</Application.Resources>

Answer 2

Updated the app to version 4.4 and that solved the issue