Use an Icon Font in Xamarin Forms TabBar

user_146309 0
Viewed 4787

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

xamarin.forms xamarin xaml
4 Answers

You have to use FontImageSource to do that.

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

user_93025110

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>
user_42150570

That's a great question. You can't use the tab icon property in a straight forward way to accept the icon font, unless you convert it into a PNG. If you want to go that route, you can try this, you might have to deal with permissions for saving images. Worth a try!

user_111040680
user_70160220
Related