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

NicolasKrierNicolasKrier ✭✭✭FRMember ✭✭✭
edited November 2018 in Xamarin.Forms

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 !

Best Answer

Answers

  • NicolasKrierNicolasKrier ✭✭✭ FRMember ✭✭✭
    edited 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.

  • NicolasKrierNicolasKrier ✭✭✭ FRMember ✭✭✭

    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 !

  • RylaRyla ✭✭ Member ✭✭

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

  • NicolasKrierNicolasKrier ✭✭✭ FRMember ✭✭✭

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

  • amirvenusamirvenus ✭✭✭ USMember ✭✭✭

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

  • NicolasKrierNicolasKrier ✭✭✭ FRMember ✭✭✭

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

  • amirvenusamirvenus ✭✭✭ USMember ✭✭✭

    @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?

  • NicolasKrierNicolasKrier ✭✭✭ FRMember ✭✭✭
    edited 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="&#xf0c8;" />

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

  • amirvenusamirvenus ✭✭✭ USMember ✭✭✭
    edited 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="&#xf0c8;" />

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

    Still it's not working for me :disappointed:

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

  • amirvenusamirvenus ✭✭✭ USMember ✭✭✭

    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!

  • NicolasKrierNicolasKrier ✭✭✭ FRMember ✭✭✭

    @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

  • RBrianLindahlRBrianLindahl ✭✭ USMember ✭✭

    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.

Sign In or Register to comment.