Font awesome icon in Xamarin forms.

Bhautik · June 2018

How to use font awesome icon with button and other control in xamarin forms?
Thanks in Advance.

Szbesta · June 2018

https://forums.xamarin.com/discussion/31530/fontawesome-label-heres-how

Mazidi · September 2018

See step by step article by Doumer, for Xamarin Forms without any platform specific code

doumer.me/icons-with-font-awesome-5-xamarin-forms/

SolomonFried · September 2018

I have been using this approach which is based on information I believe came from somewhere on this forum.

I created a new .NET Standard project containing the following 2 files; A Xaml file called FontFileResources.xaml with a backing .cs file.

(For a while I was using Styles for Labels, but for reasons I cannot recall, I have abandoned that. The Styles remain in the code in case I decide to use them in the future, but they can be removed if you will not use it)

**NOTE: **On each platform, copy the fontawesome fontfile to the directory in the elements, as shown in the XAML below.

<?xml version="1.0" encoding="UTF-8"?>
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FontNameResources.FontFileResources">
    <OnPlatform x:Key="FontAwesomeRegularId" x:TypeArguments="x:String">
        <On Platform="iOS" Value="Font Awesome 5 Pro" />
        <On Platform="Android" Value="fonts/Font Awesome 5 Pro-Regular-400.otf#Font Awesome 5 Pro" />
        <On Platform="UWP, WinRT, WinPhone" Value="Assets/Fonts/Font Awesome 5 Pro-Regular-400.otf#Font Awesome 5 Pro" />
    </OnPlatform>
    <Style x:Key="FontAwesomeRegular" TargetType="Label">
        <Setter Property="FontFamily" Value="{StaticResource FontAwesomeRegularId}" />
    </Style>

    <OnPlatform x:Key="FontAwesomeSolidId" x:TypeArguments="x:String">
        <On Platform="iOS" Value="Font Awesome 5 Pro Solid" />
        <On Platform="Android" Value="fonts/Font Awesome 5 Pro-Solid-900.otf#Font Awesome 5 Pro Solid" />
        <On Platform="UWP, WinRT, WinPhone" Value="Assets/Fonts/Font Awesome 5 Pro-Solid-900.otf#Font Awesome 5 Pro Solid" />
    </OnPlatform>
    <Style x:Key="FontAwesomeSolid" TargetType="Label">
        <Setter Property="FontFamily" Value="{StaticResource FontAwesomeSolidId}" />
    </Style>
</ResourceDictionary>

And the Code file....

    using System.Linq;
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;

    namespace FontNameResources
    {
        [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class FontFileResources : ResourceDictionary
        {

            private static readonly FontFileResources _instance = new FontFileResources();
            public FontFileResources()
            {
                InitializeComponent();
            }

            public static string FontAwesomeRegular => _instance.GetStringResourceForPlatform("FontAwesomeRegularId");
            public static string FontAwesomeSolid => _instance.GetStringResourceForPlatform("FontAwesomeSolidId");

            private string GetStringResourceForPlatform(string resourceKey)
            {
                if (!_instance.ContainsKey(resourceKey)) return null;

                if (!(_instance[resourceKey] is OnPlatform<string> resource)) return string.Empty;

                var retString = resource.Platforms.Where(c => c.Platform.Contains(Device.RuntimePlatform))
                    .Select(c => c.Value).FirstOrDefault() as string;

                return retString ?? "NOFONT";
            }

        }
    }

I include this project in any project that needs to use a custom font.

In the XAML where the font will be used I add the following xml namespace

xmlns:fn="clr-namespace:FontNameResources;assembly=FontNameResources"

Then at the Label/Button/etc... where I am using a symbol from fontawesome, I add the following

    FontFamily="{x:Static fn:FontFileResources.FontAwesomeRegular}" 
    Text="&#xf00c;"  // Enter the Glyph value here

Additionally I also have a class of const strings which I reference for Glyphs instead of using the values.

 public class GlyphNames
    {
        public const string ExpandGlyph = "\uF065";
        public const string ContractGlyph = "\uF066";
   }

So it would look something like

<Label Text="{x:Static glyphs:GlyphNames.ExpandGlyph}" />

As an aside. In order to lighten the size of my application, I have been using a Font editor (I use FontCreator from https://www.high-logic.com/). I then create an application-specific font file and copy to it (copy/paste) any fonts from fontawesome that I need for my app. My FontFile is cut to under 30K. Needless to say, I have a full purchased license of Fontawesome.

Hope this helps.

Felix.x · October 2018

http://www.fifthstreetpartners.com/using-fontawesome-5-in-xamarin-forms/

Use any ttf and Xamarin.Forms code only (no custom renderer)

AjibuluOlorunfemi · October 2018

Use the class from this url: github .com/ fzany/Font-Awesome-Cheat-Charp . fix the link by removing spaces

public class FontAwesome
{
public static class Solid
{
public static string Ad = "\uf641";
public static string Address_Book = "\uf2b9";
public static string Address_Card = "\uf2bb";
public static string Adjust = "\uf042";
public static string Air_Freshener = "\uf5d0";
public static string Align_Center = "\uf037";
public static string Align_Justify = "\uf039";
public static string Align_Left = "\uf036";
public static string Align_Right = "\uf038";
public static string Allergies = "\uf461";
public static string Ambulance = "\uf0f9";
public static string American_Sign_Language_Interpreting = "\uf2a3";
public static string Anchor = "\uf13d";
public static string Angle_Double_Down = "\uf103";
public static string Angle_Double_Left = "\uf100";
public static string Angle_Double_Right = "\uf101";
public static string Angle_Double_Up = "\uf102";
public static string Angle_Down = "\uf107";
public static string Angle_Left = "\uf104";
public static string Angle_Right = "\uf105";

igorkr_10 · October 2018

You don't need any custom renderers. Just use custom font as me: https://forums.xamarin.com/discussion/comment/350244/#Comment_350244

LearnEverything · October 2019

Its better.. that all resources are embedded with library, we do not need to add files to each platform folder like this font awesome. to make life easier and get rid of calling initialize every plugin we install and make our code cleaner. Like VS Code.

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;

namespace Xamarin.FontAwesome
{
    public class FontAwesomeView : Label
    {        
        public FontAwesomeView() : base()
        {

        }
        public FontAwesomeType FontAwesomeType
        {
            get { return (FontAwesomeType)base.GetValue(FontAwesomeTypeProperty); }
            set { base.SetValue(FontAwesomeTypeProperty, value); }
        }
        public static BindableProperty FontAwesomeTypeProperty = BindableProperty.Create(
                                                        propertyName: "FontAwesomeType",
                                                        returnType: typeof(FontAwesomeType),
                                                        declaringType: typeof(FontAwesomeView),
                                                        defaultValue: Xamarin.FontAwesome.FontAwesomeType.FontAwesomeRegular,
                                                        defaultBindingMode: BindingMode.TwoWay,
                                                        propertyChanged: FontAwesomeTypePropertyChanged);

        private static void FontAwesomeTypePropertyChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var control = (FontAwesomeView)bindable;
            var fontType = (Xamarin.FontAwesome.FontAwesomeType)newValue;
            control.UpdatePlatform();
        }

        /// <summary>
        /// No need to add fontawesome to each platform, it is already embedded with class library.
        /// </summary>
        private void UpdatePlatform()
        {
            if (this.FontAwesomeType == FontAwesomeType.FontAwesomeRegular)
                this.FontFamily = "Xamarin.FontAwesome.Resources.Fonts.FontAwesome5Regular.otf";
            else if(this.FontAwesomeType == FontAwesomeType.FontAwesomeBrands)
                this.FontFamily = "Xamarin.FontAwesome.Resources.Fonts.FontAwesome5Brands.otf";
            else if(this.FontAwesomeType == FontAwesomeType.FontAwesomeSolid)
                this.FontFamily = "Xamarin.FontAwesome.Resources.Fonts.FontAwesome5Solid.otf";
        }
    }
    public enum FontAwesomeType
    {
        FontAwesomeBrands,
        FontAwesomeSolid,
        FontAwesomeRegular,
    }
}

More Info
https://baskren.github.io/Forms9Patch/index.html

LearnEverything · October 2019

Font file reader (import existing .ttf files)
https://microsoft.com/store/productId/9WZDNCRDXF41

sucharitha · October 2019

Hello everyone
"Click \ue701 to add new friend" is my sentence and getting this from resource file (translations) but when im binding it
example : Text="{i18n:Translate Key}" /> (where Key = "Click \ue701 to add new friend")
Its not working.
Can Anyone pls help me in finding a solution for this.
Thank you.

Xamarin

Quick Links

Font awesome icon in Xamarin forms.

Answers