Cannot get FontAwesome 5 to work with Xamarin Forms, iOS and Android

Question

I tried following all the tutorials I could find and most closely followed this one:

https://github.com/coolc0ders/FontAwesome5XamarinForms

But all that appears are question marks instead of icons and even the example above doesn't work for me when I run it.

My XML looks like this:

<Label Text="&#xf249;"  FontSize="20" Grid.Column="0" >
   <Label.FontFamily>
      <OnPlatform 
         x:TypeArguments="x:String"
            Android="Font Awesome 5 Free-Regular-400.otf#Font Awesome 5 Free Regular" 
            iOS="Font Awesome 5 Free" />
   </Label.FontFamily>
</Label>

I have some questions now.

• Do I need to set FontFamily to "FontAwesome"
• For Android & iOS should I use a .ttf file or a .otf file
• For iOS do I need to edit the info.plist and if so how do I do that?
• Should I specify my icon like "" or like "\uf004"
• For Android & iOS d0 I need to set the font files as "copy to output directory"
• How do I find out the name of the font? I set it to "Font Awesome 5 Free" but that was just copying the example and I can't get that to work either.
• What should I specify for iOS=" ", should that be the filename less the .ttf (or .otf)? How about Android= ?

Sorry if these questions seems basic but I just cannot after a very long time get the icons to show. All that appears is a ? and I cannot seem to find any place that explains how to do this for FontAwesome 5 and Xamarin other than examples that don't work.

Answer 1

FontAwesome 5 is a bit more complicated then FontAwesome 4 as you have 3 set of fonts. I've done this for font awesome 5 pro.

Do I need to set FontFamily to "FontAwesome"

For iOS, you can set the fontfamily to Font Awesome 5 Brands, if you use the brand set or to Font Awesome 5 Pro, if you use any one of the 3 other sets. For now, you can use only one set at a time. I'll give you another answer so that you will be able to use the 3 sets in the same application.

For Android, this is my switch:

switch (awesomeStyle)
            {
                case AwesomeStyle.Brands:
                    fontFile = "fa-brands-400.ttf#Font Awesome 5 Brands";
                    break;
                case AwesomeStyle.Light:
                    fontFile = "fa-light-300.ttf#Font Awesome 5 Pro";
                    break;
                case AwesomeStyle.Regular:
                    fontFile = "fa-regular-400.ttf#Font Awesome 5 Pro";
                    break;
                case AwesomeStyle.Solid:
                    fontFile = "fa-solid-900.ttf#Font Awesome 5 Pro";
                    break;
                default:
                    throw new ArgumentOutOfRangeException();
            }

For Android & iOS should I use a .ttf file or a .otf file

I use the .ttf file.

For iOS do I need to edit the info.plist and if so how do I do that?

Yes. Add the following key to your info.plist file. Add just one string between light, regular or solid.

<key>UIAppFonts</key>
<array>
    <string>fa-brands-400.ttf</string>
    <string>fa-light-300.ttf</string>
    <string>fa-regular-400.ttf</string>
    <string>fa-solid-900.ttf</string>
</array>

Should I specify my icon like "" or like "\uf004"

In xaml, you use the "" version. In C#, you use the "\uf004" version.

For Android & iOS d0 I need to set the font files as "copy to output directory"

nope

How do I find out the name of the font? I set it to "Font Awesome 5 Free" but that was just copying the example and I can't get that to work either.

I gave you the names above. Otherwise, you should use a font editor to find the name. In windows, you can find the name in the properties of the font file but there is too much information and you should ignore the last word of the title (in the details tabs).

What should I specify for iOS=" ", should that be the filename less the .ttf (or .otf)? How about Android= ?

See above.

Answer 2

If you want to use some Awesome Font files in Xamarin.IOS, you must know what is the 'Postscript Name' of your ttf files. Just see the following picture:

iOS loads any font by 'PostScript Name', so if the filename and 'PostScript Name' are different, we should use it carefully.

You should download a font viewer tool and check this property. And you must assign this name to 'FontFamily' or 'Font' property of your Xamarin.Forms or Xamarin.IOS control.

In Xamarin.Android, the OS will not load font file by 'Postscript Name', but use file name directly.

So I suggest that you should rename it to the 'PostScript Name', just like 'FontAwesome5Pro-Light.ttf'. Then you can assign 'FontAwesome5Pro-Light' to the 'FontFamily' property of your Label or Button control.

Then you can use it as you wish. Or else, you will see a small box and a question mark.