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"
            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 (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.

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

 

Advertisements

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