FontAwesome in Xamarin forms UWP - xamarin.forms

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 ?

Answer 1

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

Answer 2

The correct path to add a font on UWP is /Assets/Fonts/FontAwesome.ttf#FontAwesome it seems you have to add the Fonts folder.
Like this:
Additionally you can use Iconize plugin and check this answer:
How can I display a font awesome glyph in XAML/C#