9

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

danwellman
  • 9,068
  • 8
  • 60
  • 88

4 Answers4

19

You have to use FontImageSource to do that.

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

TechWatching
  • 1,363
  • 1
  • 11
  • 23
  • 1
    Brilliant, this worked, thanks. The only issue seems to be with the `Size` property - I can only get this to work with a number rather than a string. – danwellman Jun 27 '19 at 09:27
3

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>
RRV
  • 143
  • 10
1

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!

Saamer
  • 4,687
  • 1
  • 13
  • 55
1

You can do that with custom renderers as a workaround. Check this example on GitHub here: https://github.com/winstongubantes/Xamarin.Forms/tree/master/CustomIconizeFont

Raimo
  • 1,494
  • 1
  • 10
  • 19