Xamarin: FontAwesome Image

download.pngNow 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"

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 (stringGetValue(FontImageGlyphProperty); }
        set { SetValue(FontImageGlyphPropertyvalue); }
    public static readonly BindableProperty FontImageGlyphProperty =
        BindableProperty.Create(nameof(FontImageGlyph), typeof(string), typeof(FontAwesomeImage),
            propertyChanged: (bindableoldValuenewValue) => ((FontAwesomeImagebindable).Populate());
    public double FontImageSize
        get { return (doubleGetValue(FontImageSizeProperty); }
        set { SetValue(FontImageSizePropertyvalue); }
    public static readonly BindableProperty FontImageSizeProperty =
        BindableProperty.Create(nameof(FontImageSize), typeof(double), typeof(FontAwesomeImage),
            propertyChanged: (bindableoldValuenewValue) => ((FontAwesomeImagebindable).Populate());
    public Color FontImageColor
        get { return (ColorGetValue(FontImageColorProperty); }
        set { SetValue(FontImageColorPropertyvalue); }
    public static readonly BindableProperty FontImageColorProperty =
        BindableProperty.Create(nameof(FontImageColor), typeof(Color), typeof(FontAwesomeImage),
            propertyChanged: (bindableoldValuenewValue) => ((FontAwesomeImagebindable).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.

                FontImageGlyph="{x:Static fonts:FontAwesomeLight.Bookmark}"


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s