1
votes

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.

App with the icon as square containing x

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

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="&#xf011;" 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="&#xf011;" TextColor="White" FontFamily="{StaticResource FontAwesomeSolid}"/>
            <Label Text="&#xf011;" TextColor="White" FontFamily="{StaticResource FontAwesomeBrands}"/>
            <Label Text="&#xf011;" TextColor="White" FontFamily="{StaticResource FontAwesomeRegular}"/>
            <trainInUrl:CustomFontLabel Text="&#xf011;" FontFamily="{StaticResource FontAwesomeSolid}"/>
            <trainInUrl:CustomFontLabel Text="&#xf011;" FontFamily="{StaticResource FontAwesomeBrands}"/>
            <trainInUrl:CustomFontLabel Text="&#xf011;" FontFamily="{StaticResource FontAwesomeRegular}"/>
        </StackLayout>

Result

enter image description here

2

2 Answers

0
votes

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.

Assets

<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>
0
votes

Updated the app to version 4.4 and that solved the issue