Xamarin: FontAwesome Image

Now that Xamarin supports a FontImageSource as a source for an Image, it’s time to create a simple custom Image control that uses it.

 

 

Step 1: In your App.xaml add a reference to the FontAwsome font you’d like after you have added it to your iOS and Android project:

<OnPlatform x:Key="FontAwesomeLightFontFamily" x:TypeArguments="x:String"
            Android="fa-light-300.ttf#Font Awesome 5 Pro"
            iOS="FontAwesome5Pro-Light"/>

Step 2: Go to Andre’s site and generate a Font Reference for that font. It will look like this:

static class FontAwesomeLight
{
    public const string GlassMartini = "\uf000";
    public const string Music = "\uf001";
    public const string Search = "\uf002";

Step 3: Create this control that is based on an Image:

public class FontAwesomeImage : Image
{
 
    public string FontImageGlyph
    {
        get { return (string) GetValue(FontImageGlyphProperty); }
        set { SetValue(FontImageGlyphProperty, value); }
    }
 
    public static readonly BindableProperty FontImageGlyphProperty =
        BindableProperty.Create(nameof(FontImageGlyph), typeof(string), typeof(FontAwesomeImage),
            propertyChanged: (bindable, oldValue, newValue) => ((FontAwesomeImage) bindable).Populate());
 
    public double FontImageSize
    {
        get { return (double) GetValue(FontImageSizeProperty); }
        set { SetValue(FontImageSizeProperty, value); }
    }
 
    public static readonly BindableProperty FontImageSizeProperty =
        BindableProperty.Create(nameof(FontImageSize), typeof(double), typeof(FontAwesomeImage),
            propertyChanged: (bindable, oldValue, newValue) => ((FontAwesomeImage) bindable).Populate());
 
 
    public Color FontImageColor
    {
        get { return (Color) GetValue(FontImageColorProperty); }
        set { SetValue(FontImageColorProperty, value); }
    }
 
    public static readonly BindableProperty FontImageColorProperty =
        BindableProperty.Create(nameof(FontImageColor), typeof(Color), typeof(FontAwesomeImage),
            propertyChanged: (bindable, oldValue, newValue) => ((FontAwesomeImage) bindable).Populate());
 
 
    void Populate()
    {
        this.Source = new FontImageSource()
        {
            FontFamily = "FontAwesomeLightFontFamily",
            Color = FontImageColor,
            Glyph = FontImageGlyph,
            Size = FontImageSize
        };
    }
 
 
}

Step 4: To use it, just add this markup to your XAML page.

            <common:FontAwesomeImage 
                FontImageColor="White" 
                FontImageGlyph="{x:Static fonts:FontAwesomeLight.Bookmark}"
                FontImageSize="24">
            </common:FontAwesomeImage>