Why doesn't Font Awesome display for iOS apps using Xamarin Forms?

1
votes

I'm trying to add font awesome icons to my tabbed page tabs. I've followed what I believe are the correct steps to be able to configure display font awesome icons for Xamarin.forms applications but for some reason the icons display for the android app but not the iOS app.

enter image description here enter image description here

I first added the font awesome .ttf files to the android Assets folder and the iOS Resources folder:

Android iOS

Next I updated the Info.plist file for iOS in order to include the .ttf files from Font Awesome:

enter image description here

Then I configured use of the Font Awesome icons in App.xaml:

enter image description here

Finally I added the needed icons to the their tabs:

enter image description here

4
androidiosxamarinxamarin.formsfont-awesome
iOS does NOT use the file system name for the font family, it uses the postscript family name (these are encoded inside the file) , those names are available via UIFont.FontNamesForFamilyName, look at the code at the bottom of my answer here ( stackoverflow.com/a/48191854/4984832 ) and you can temp. add it your Xamarin.iOS project and get your names from the console/debug output. OR use the macOS system app: "Font Book", see my answer here: stackoverflow.com/questions/45768488/… – SushiHangover
Read this guide: devblogs.microsoft.com/xamarin/embedded-fonts-xamarin-forms. You don't need to add the font files to the platform projects. Then delete app data and try again. – Saftpresse99
please do NOT post code or errors as images – Jason
@Saftpresse99 I tried following those exact steps before but it causes an error to be thrown in the MainActivity cs file in the android project: System.TypeLoadException: 'Could not resolve type with token' – aqwright31

4 Answers

3
votes

On iOS, please use 'Real' name of font instead of the filename.

You can check this by rightclick on font file -> Properties -> Details -> Title on the windows. For example, I test a custom font file which the file name is Font Awesome 5 Free-Solid-900.otf. It does not work if set the value to the file name:

<OnPlatform x:TypeArguments="x:String" x:Key="FontAwesomeSolid">
    ...
    <On Platform="iOS" Value="Font Awesome 5 Free-Solid-900" />
</OnPlatform>

Try getting the tilte of the custom font file and remove the 'space'.

enter image description here

Specify the value like below:

<OnPlatform x:TypeArguments="x:String" x:Key="FontAwesomeSolid">
    <On Platform="iOS" Value="FontAwesome5Free-Solid" />
</OnPlatform>

Refer: Font Awesome not working in iOS

0
votes

Replace your iOS values in App.xaml.

<OnPlatform x:TypeArguments="x:String" 
                x:Key="FontAwesomeBrands">
                <On Platform="iOS"
                Value="FontAwesome5Brands-Regular" />
            </OnPlatform>

            <OnPlatform x:TypeArguments="x:String" 
                x:Key="FontAwesomeSolid">
                <On Platform="iOS" 
                Value="FontAwesome5Free-Solid" />
            </OnPlatform>

            <OnPlatform x:TypeArguments="x:String" 
                x:Key="FontAwesomeRegular">
                <On Platform="iOS" 
                Value="FontAwesome5Free-Regular" />
            </OnPlatform>

To get the correct font Name to use in iOS use below code in AppDelegate in FinishedLaunching.

foreach (var family in UIFont.FamilyNames)
            {
                System.Diagnostics.Debug.WriteLine($"{family}");
                foreach (var names in UIFont.FontNamesForFamilyName(family))
                {
                    System.Diagnostics.Debug.WriteLine($"{names}");
                }
            }
0
votes

Setting these values works for both Android and iOS in App.xaml.

        <OnPlatform x:Key="FontAwesomeBrands"
                    x:TypeArguments="x:String">
            <On Platform="iOS"
                Value="FontAwesome5Brands-Regular" />
            <On Platform="Android"
                Value="FontAwesome5BrandsRegular400.otf#" />
        </OnPlatform>

        <OnPlatform x:Key="FontAwesomeSolid"
                    x:TypeArguments="x:String">
            <On Platform="iOS"
                Value="FontAwesome5Free-Solid" />
            <On Platform="Android"
                Value="FontAwesome5FreeSolid900.otf#" />
        </OnPlatform>

        <OnPlatform x:Key="FontAwesomeRegular"
                    x:TypeArguments="x:String">
            <On Platform="iOS"
                Value="FontAwesome5Free-Regular" />
            <On Platform="Android"
                Value="FontAwesome5FreeRegular400.otf#" />
        </OnPlatform>
0
votes

Another approach is to add the fonts as an Embedded Resource in the main project (the abstracted one, not *.iOS) and add the following to the top of App.xaml.cs (above the namespace):

[assembly: ExportFont("fa-solid-900.ttf", Alias = "FASolid")]
[assembly: ExportFont("fa-regular-400.ttf", Alias = "FARegular")]
[assembly: ExportFont("fa-brands-400.ttf", Alias = "FABrands")]

This approach works for both Android and iOS.