How to use an icon from an embedded resource font file in Xamarin Forms

Question

I want to use icons from Font Awesome in my Xamarin Forms application. I have followed several tutorials I found but I still can't get the icons to display. Here is a portion of the static class showing the class name and namespace:

namespace NGIC_XAML.Constants
{
    public static class IconFontsFAProRegular
    {
        public const string GlassMartini = "\uf000";
        public const string Music = "\uf001";
        public const string Search = "\uf002";
        public const string Heart = "\uf004";
    }
}

Here is the ExportFont statement in my AssemblyInfo.cs file:

[assembly: ExportFont("Font-Awesome-5-Pro-Regular-400.otf", Alias = "FAProRegular")]

Here is the declaration of the namespace in my XAML file:

             xmlns:local="clr-namespace:NGIC_XAML.Constants"

And finally, here is the tag where I want to use one of the font icons:

                    <Image
                        HeightRequest="44"
                        HorizontalOptions="Center"
                        VerticalOptions="Center"
                        WidthRequest="44">
                        <Image.Source>
                            <FontImageSource
                                FontFamily="FAProRegular"
                                Glyph="{x:Static local:IconFontsFAProRegular.Heart}"
                                Size="44"
                                Color="{StaticResource NGIC_Red}"  />
                        </Image.Source>
                    </Image>

The output

Someone is bound to ask, so here are the packages installed:

I would sure like to know what I;m doing wrong! I also don't get intellisense when I enter the namespace name in the ImageSource.

Answer 1

You must set font family as static resource and reference it in your code. Otherwise it will not work.

                   <Image.Source>
                        <FontImageSource
                            FontFamily="{StaticResource FontAwesomeRegular}"
                            Glyph="{x:Static local:IconFontsFAProRegular.Heart}"
                            Size="44"
                            Color="{StaticResource NGIC_Red}"  />

Example:

<OnPlatform x:Key="FontAwesomeBrands" x:TypeArguments="x:String">
    <On Platform="Android" Value="FontAwesome5Brands.otf#Regular" />
    <On Platform="iOS" Value="FontAwesome5Brands-Regular" />
    <On Platform="UWP" Value="/Assets/FontAwesome5Brands.otf#Font Awesome 5 Brands" />
</OnPlatform>

<OnPlatform x:Key="FontAwesomeSolid" x:TypeArguments="x:String">
    <On Platform="Android" Value="FontAwesome5Solid.otf#Regular" />
    <On Platform="iOS" Value="FontAwesome5Free-Solid" />
    <On Platform="UWP" Value="/Assets/FontAwesome5Solid.otf#Font Awesome 5 Free" />
</OnPlatform>

<OnPlatform x:Key="FontAwesomeRegular" x:TypeArguments="x:String">
    <On Platform="Android" Value="FontAwesome5Regular.otf#Regular" />
    <On Platform="iOS" Value="FontAwesome5Free-Regular" />
    <On Platform="UWP" Value="/Assets/FontAwesome5Regular.otf#Font Awesome 5 Free" />
</OnPlatform>

Answer 2

When using C# code in a XAML file it is important to add the assembly, with this you can use your Font Icons without any problem.

xmlns:local="clr-namespace:NGIC_XAML.Constants;assembly=NGIC_XAML"