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>