FontAwesome in Xamarin forms UWP

Question

I have a Custom renderer working in Android with Fontawesome. I was following this guide using font awesome in UWP With a custom Label type to try to get Fontawesome working in UWP.

public class FontAwesomeLabel: Xamarin.Forms.Label    {
    public FontAwesomeLabel()        {
        switch (Device.RuntimePlatform)
      {
           case Device.UWP:
                FontFamily = @"/Assets/FontAwesome.otf#FontAwesome";
                break;
        }
    }
}

The fonts

were loaded as both ttf and otf. I have tried both types. They Assest fonts have build action "Content"

mainView.Children.Add( new FontAwesomeLabel()
      {Text = FaConstPool.FASearch ,FontSize = 40});

public static string FASearch = "\uf002";

Only works on Android and not in UWP

I see a strange box and not the expected Fontawesome icon as for Android.

Any ideas what i have done wrong ?

phil soady phil soady · Accepted Answer · 2018-01-22T03:13:26

The solution to the problem turned out to be in UWP, use the correct font family name. Font Awesome 5 Free Solid and not just "FontAwesome"

 // FontFamily = @"/Assets/FontAwesome.otf#FontAwesome"; // incorrect font family name
    FontFamily = @"/Assets/Fonts/FontAwesome.otf#Font Awesome 5 Free Solid";

For anyone interested in details:
I downloaded a font editor to check the internal font name and font family name. I made the mistake of code copying blog posts that used values from similar/older fonts. See image for actual content.

There are 2 types of solution I got to work:
1) A custom control in shared code /.netStandard Common project.
2) a custom renderer

Solution 1: Custom Label

public class FontAwesomeLabel: Xamarin.Forms.Label
{
    public FontAwesomeLabel()
    {
        switch (Device.RuntimePlatform)
        {
           case Device.UWP:
             // make sure the correct font family name is used. Check in a font editor
               this.FontFamily = @"/Assets/Fonts/FontAwesome.otf#Font Awesome 5 Free Solid";
                break;
        }
    }
}

Solution 2: Customer renderer on Standard Control

[assembly: ExportRenderer(typeof(Label), typeof(FontAwesomeLabelRenderer))]
namespace Oxando.UWP.CustomRenderers
{
public class FontAwesomeLabelRenderer : LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);
        if (Control != null)
        {
            // on UWP be sure use the Font Family name.
            // get a font editor and check the name, if it doesnt match UWP wont load it
            if (FontAwesomeUtil.CheckIsFA(e.NewElement.Text))
            {
                Control.FontFamily = new FontFamily("/Assets/Fonts/FontAwesome.otf#Font Awesome 5 Free Solid");
            }
        }
    }
}
internal static class FontAwesomeUtil
{
    public static bool CheckIsFA(string text)
    {
        if (text.Length == 0) return false;
        if (text.Length > 1 || text[0] < 0xf000) return false;
        return true;
    }
}

}

Actual internal names as shown in Font editor

FontAwesome in Xamarin forms UWP

2 Answers