C# Xaml - Use Custom Class - Works programatically but not in Xaml

Question

I'm pretty new with Xaml and i'm facing an issue . I want to use FontAwesome Icons in my app and after following a tutorial , i can use the icons programmatically (Code Below) .

Content = new StackLayout
            {
                Children = {
                    new FontIcon(FontIcon.Icon.Globe) {TextColor=Color.Red }
                  },
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
            };

However , when i try to implement this in Xaml - it crashes my app.

Code for Shared class extending label :

using Xamarin.Forms;

namespace myApp.Fonts
{
    public class FontIcon : Label
    {
        public const string Typeface = "FontAwesome";

        public FontIcon(string faIcon = null)
        {
            FontFamily = Typeface;  
            Text = faIcon;
        }

        public static class Icon
        {
            public static readonly string Gear = "";
            public static readonly string Globe = "\uf000";
        }
    }
}

Xaml code ...Note that i'm already using the xmlns:local for another class

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="myApp.TestPage"
             xmlns:ctt="clr-namespace:myApp.Fonts">


<ctt:FontIcon  FontIcon ="\uf000" VerticalOptions="Center" HorizontalOptions="Center" />

I'm guessing the issue is with this line :

<ctt:FontIcon  FontIcon ="\uf000" VerticalOptions="Center" HorizontalOptions="Center" />

I'm not sure how to access that class via xaml or if its even possible to use xlmns:ctt

EDIT-------------------------------------------------------------------------

I used debug and this is the actual error :

System.MissingMethodException: Default constructor not found for type myApp.Fonts.FontIcon

Edit 2 :

I did this :

public FAIcon()
        {

        }

And in xaml :

<custom:FAIcon FontFamily = "Typeface" Text = "\uf000" VerticalOptions="Center" HorizontalOptions="Center" />

The app doesn't crash now but it displays the plain text instead of the icon

This is my android renderer :

[assembly: ExportRenderer(typeof(FontIcon), typeof(FARenderer))]

namespace myApp.Droid.Renderers
{
    public class FARenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);
            if (e.OldElement == null)
            {
                Control.Typeface = Typeface.CreateFromAsset(Forms.Context.Assets, FontIcon.Typeface + ".ttf");
            }
        }
    }
}

Answer 1

if you always want to use FontAwesome, set it in your constructor:

public const string Typeface = "FontAwesome";

public FAIcon()
{
  FontFamily = TypeFace;
}

don't do this in your XAML, it just sets the FontFamily to "TypeFace" which is not what you want

<custom:FAIcon FontFamily = "Typeface" ...