Xamarin Forms - FontAwesome works iOS,Android but UWP display [x]

NicolasKrier · November 2018

Hello dear Xamariners !

I'm wasting a lot of time trying to figure out why FontAwesome doesn't work on Android & iOS.
No need to tell you that I've tried several solutions I found on this forum.

To help you to help me (what ? haha)
Here are some screenshots :

On iOS :

On UWP or Android (kind of same result I don't have the right icon)

The FontFamily resource in app.xaml :

My Fonts folder :

My VS fonts Android folder with the properties AndroidAsset // copy if newer

My VS fonts UWP folder with the properties Content // Do not copy

Do you have any idea why it isn't working ?

I've tried several way to declare my font (without the otf.#name of font , with .otf#name of font style , with .otf only)

If anybody got this working, it would be awesome to get some help.
PS : I'd like to avoid a custom renderer

I wish you all a good weekend !

Irongut · November 2018

I think you have a path problem. On UWP your code says the font is supposrd to be in \Fonts but your screenshot shows it in \Assets\Fonts. Here's how I use FA on Android and UWP:

<OnPlatform x:Key="FontAwesomeSolid" x:TypeArguments="x:String">
    <On Platform="Android" Value="Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid" />
    <On Platform="UWP, WinRT, WinPhone" Value="Assets/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free" />
</OnPlatform>
<Style x:Key="FA-Solid" TargetType="Label">
    <Setter Property="FontFamily" Value="{StaticResource FontAwesomeSolid}" />
</Style>

NicolasKrier · November 2018

LOL. That's always like this... It's when you spend 5 minutes writting a ticket that you think "I can't believe I'm stuck on this... What a beginner......... FML" then you found a solution.

I tried the iOS value for android and got it working.

            <On Platform="Android" Value="Fonts/FontAwesome-Regular.otf#FontAwesome5ProRegular" />

But it doesn't work for UWP.

Irongut · November 2018

I think you have a path problem. On UWP your code says the font is supposrd to be in \Fonts but your screenshot shows it in \Assets\Fonts. Here's how I use FA on Android and UWP:

<OnPlatform x:Key="FontAwesomeSolid" x:TypeArguments="x:String">
    <On Platform="Android" Value="Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid" />
    <On Platform="UWP, WinRT, WinPhone" Value="Assets/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free" />
</OnPlatform>
<Style x:Key="FA-Solid" TargetType="Label">
    <Setter Property="FontFamily" Value="{StaticResource FontAwesomeSolid}" />
</Style>

NicolasKrier · November 2018

Ah... I thought it was looking into the Assets folder and that the platform was doing a Path.Combine("Assets", pathGiven).
I was mistaken by Android & iOS which both look into the Assets folder.
Thanks a lot ! I don't know why I didn't test that.
Have a nice weekend Irongut !

Ryla · November 2018

I have encountered the same problem, instead I tried the image

NicolasKrier · November 2018

@Ryla you shouldn't, it works great once the path is well set

amirvenus · January 21

I am wondering if anyone's used the Regular and Solid variations of the FA Pro in XF.iOS app.

NicolasKrier · January 23

@amirvenus i'm using FA Pro (light, solid, regular) with XF and everything work fine.

amirvenus · January 23

@NicolasKrier said:
@amirvenus i'm using FA Pro (light, solid, regular) with XF and everything work fine.

Could you please share how you set it up?

NicolasKrier · January 24

@amirvenus try to do the same thing as I wrote in the first message of this post : I posted every screenshots.

On iOS you will have to do that too : in info.plist
<key>UIAppFonts</key>
<array>
<string>Fonts/FontAwesome-Regular.otf</string>
<string>Fonts/FontAwesome-Solid.otf</string>
<string>Fonts/FontAwesome-Light.otf</string>
</array>

And here is the missing screenshot to find where I put the fonts :

In your App.xaml :

And use it like that :
<Label FontFamily="{StaticResource FAR}" Text="" />

Don't forget the thumb up if it works ;D

amirvenus · January 25

@NicolasKrier said:
@amirvenus try to do the same thing as I wrote in the first message of this post : I posted every screenshots.

On iOS you will have to do that too : in info.plist
<key>UIAppFonts</key>
<array>
<string>Fonts/FontAwesome-Regular.otf</string>
<string>Fonts/FontAwesome-Solid.otf</string>
<string>Fonts/FontAwesome-Light.otf</string>
</array>

And here is the missing screenshot to find where I put the fonts :

In your App.xaml :

And use it like that :
<Label FontFamily="{StaticResource FAR}" Text="" />

Don't forget the thumb up if it works ;D

Still it's not working for me

       <StackLayout Margin="0,250,0,0">
            <Label Text="I am supposed to be Lato" FontSize="25" FontFamily="{StaticResource LATO}" />
            <Label Text="I am supposed to be Default" FontSize="25"  />
            <Label Text="I am supposed to be a heart &#xf004;" FontSize="25" FontFamily="{StaticResource FAS}" />
        </StackLayout>

and my App.xaml:

    <Application.Resources>

        <OnPlatform x:Key="FAR" x:TypeArguments="x:String">
            <On Platform="Android" Value="Fonts/FontAwesome-Regular.otf#FontAwesome5ProRegular" />
            <On Platform="iOS" Value="Fonts/FontAwesome5ProRegular" />
        </OnPlatform>

        <OnPlatform x:Key="FAS" x:TypeArguments="x:String">
            <On Platform="Android" Value="Fonts/FontAwesome-Solid.otf#FontAwesome5ProSolid" />
            <On Platform="iOS" Value="Fonts/FontAwesome5ProSolid" />
        </OnPlatform>

        <OnPlatform x:Key="FAL" x:TypeArguments="x:String">
            <On Platform="Android" Value="Fonts/FontAwesome-Light.otf#FontAwesome5ProLight" />
            <On Platform="iOS" Value="Fonts/FontAwesome5ProLight" />
        </OnPlatform>

        <OnPlatform x:Key="LATO" x:TypeArguments="x:String">
            <On Platform="Android" Value="Fonts/lato-regular.ttf#Lato" />
            <On Platform="iOS" Value="Fonts/Lato" />
        </OnPlatform>
    </Application.Resources>

and my info.plist:

<key>UIAppFonts</key>
    <array>
        <string>fa-regular-400.ttf</string>
        <string>fa-solid-900.ttf</string>
        <string>lato-regular.ttf</string>
        <string>Fonts/lato-regular.ttf</string>
        <string>Fonts/FontAwesome-Regular.otf</string>
        <string>Fonts/FontAwesome-Solid.otf</string>
        <string>Fonts/FontAwesome-Light.otf</string>
    </array>

and my folder structure on iOS:

BTW, it's working fine on Android:

but on iOS:

amirvenus · January 25

EDIT:

I managed to get them working.

Somehow, iOS didn't like the fonts being placed in the Fonts folder so I placed them inside the Resources main folder and edited info.plist and it just works now!

NicolasKrier · January 25

@amirvenus the ios folder didn't work for a simple reason : what you did was good except the way you declare the font resource in App.xaml.
If you take a closer look :
You used
<On Platform="iOS" Value="Fonts/FontAwesome5ProRegular" />
Instead of :
<On Platform="iOS" Value="FontAwesome5ProRegular" />

iOS doesn't store the fonts by the path but by its name. The path is already given in the info.plist

RBrianLindahl · May 30

Thank you! It works. Except: the names seem to have changed at some point. They now have a dash in them - i.e., FontAwesome5Pro-Light. At least for the ones in the "desktop" download from FontAwesome.

Xamarin

Xamarin Forms - FontAwesome works iOS,Android but UWP display [x]

Best Answer

Answers

Xamarin

Quick Links

Xamarin Forms - FontAwesome works iOS,Android but UWP display [x]

Best Answer

Answers