Xamarin FontAwesome icons seen as squares with an x inside

Question

After watching James Montemagno video guide on fonts in Xamarin, I'm having an issue with displaying the icons either in the tab view or in a button. The Intellisense works and it recognizes all the fonts within the FontAwesomeIcons.cs file downloaded from Mathew's github but displays them as an X withing a square. Couldn't find any working solution to this. Everything is up to date.

assemblyinfo.cs:

using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
[assembly: ExportFont("Font Awesome 5 Brands-Regular-400", Alias = "FAB")]
[assembly: ExportFont("Font Awesome 5 Free-Regular-400", Alias = "FAR")]
[assembly: ExportFont("Font Awesome 5 Free-Solid-900", Alias = "FAS")]

AppShell:

<Shell.Resources>
   <ResourceDictionary>
      <Style TargetType="ShellContent" x:Key="PricingPage">
                <Setter Property="Icon">
                    <Setter.Value>
                        <FontImageSource FontFamily="FAS" Glyph="{x:Static fontAwesome:FontAwesomeIcons.BalanceScale}"/>
                    </Setter.Value>
                </Setter>
       </Style>
   </ResourceDictionary>
</Shell.Resources>
<TabBar>
        <Tab Title="PricingPage" Style="{StaticResource PricingPage}" >
            <ShellContent Title="PricingPage"   Route="PricingPage" ContentTemplate="{DataTemplate local:ProductPricing}" />
            <ShellContent Title="ExistingProductPricing" IsVisible="False" Route="ExistingProductPricing" Shell.FlyoutBehavior="Disabled" ContentTemplate="{DataTemplate local:ExistingProductPricing}" /> 
        </Tab>
 </TabBar>

Button in a page with the namespace working:

<Button
    Text="{x:Static fontAwesome:FontAwesomeIcons.CheckCircle}"
    FontFamily="FAS"/>

The X is seen in the android emulator, on my phone it is just a blank square if it matters.

If anything else is needed I'll add it. Thanks for all the help in advance

score 3 · Accepted Answer · answered Jul 18 '21 at 07:03

I think what missing is that you should include the files extension in the ExportFont:

using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
[assembly: ExportFont("Font Awesome 5 Brands-Regular-400.ttf", Alias = "FAB")]
[assembly: ExportFont("Font Awesome 5 Free-Regular-400.ttf", Alias = "FAR")]
[assembly: ExportFont("Font Awesome 5 Free-Solid-900.tff", Alias = "FAS")]

More details How to use Font Awesome icons in project as an icon of ImageButton

Thank you very much! I have added my otf extension and it works like a charm. much appreciated! — Kahalon, Jul 18 '21 at 07:11

Xamarin FontAwesome icons seen as squares with an x inside

1 Answers1