Use an Icon Font in Xamarin Forms TabBar

Question

I am just getting started with Xamarin Forms, so please excuse what may well be a rookie question...

I started out with a new Shell Forms App in Visual Studio, so some code was generated for me.

There is an AppShell page which contains a TabBar control. Inside this are Tab controls were I can set my ShellContent pages.

Each Tab has an Icon property, but this apparently only accepts PNG icons.

How can I use an icon font (which is already hooked up to display icons correctly as I am using them in the content of another page) for my Tab icons in Xaml?

I am using Xamarin.Forms 4.0.0.497661

Answer 1

You have to use FontImageSource to do that.

<Tab Title="MyTitle"> <Tab.Icon> <FontImageSource FontFamily="{StaticResource IconFont}" Glyph="&#xF00A;" Size="Small"/> </Tab.Icon> ... </Tab>

Answer 2

The solution below worked for me.

Copied the files from fontawesome inside Assets folder

• fa-brands-400.ttf
• fa-regular-400.ttf
• fa-solid-900.ttf

Important the reference "Font Awesome 5 Brands" according to icon needed

<Tab.Icon>
    <FontImageSource FontFamily="fa-brands-400.ttf#Font Awesome 5 Brands" Glyph="&#xf39e;"/>
</Tab.Icon>