Xamarin.forms: [Bug] Embedded Fonts not rendering with FontImageSource in iOS

Created on 8 Apr 2020  路  11Comments  路  Source: xamarin/Xamarin.Forms

Description

Using Embedded Fonts to be used as FontImageSource

<Image>
  <Image.Source>
    <FontImageSource
      FontFamily="FontAwesome"
      Glyph="&#xf584;"
      Color="Black" />
  </Image.Source>
</Image>

Expected Behavior

The FontIcon should be displayed

Actual Behavior

The FontIcon doesn't display correctly in iOS

Basic Information

  • Version with issue: 4.5.0.530
  • Platform Target Frameworks:

    • iOS: 13.4

  • Nuget Packages:

    • Xamarin.Forms 4.5.0.530

  • Affected Devices:

    • iOS

Screenshots

image

Reproduction Link

https://github.com/jjchiw/EmbeddedFontsSample/tree/test/embedded_font_as_font_image_source

embedded fonts fonticon 2 high impact iOS 馃崕 bug

Most helpful comment

I'm having same issue on iOS devices for tabbedpage icons.
I've tested with XF 4.6.0.847 and XF 4.7.0.1080.
image

Android devices are Ok :
image

@samhouts : can you please fix this issue ?

All 11 comments

Hey there, thanks for the report! Looks like this might be the same as #10226.

Could you maybe pull down the NuGet from the PR that is linked in that issue and see if that fixes this for you?

Not really sure how to pull down the NuGet from the PR :/

I added the nuget repo of nightly builds

(4.7.0.597-nightly)
image

(4.6.0.369-nightly)
image

And it's not the same issue, I downloaded the Sample Project to reproduce from https://github.com/xamarin/Xamarin.Forms/issues/10226 and it's not using FontImageSource in any of the samples

Downloaded the fix from the referenced PR but that does not fix this issue unfortunately.

I also wasn't able to use Embedded Fonts with FontImageSource on Android.

<ShellContent
            Title="V铆deos"
            ContentTemplate="{DataTemplate views:Videos}"
            Icon="{FontImage FontFamily='FontAwesomeSolid',
                             Color=Black,
                             Glyph={x:Static icons:FontAwesomeIcons.Youtube},
                             Size=13}" />

It fails with error "java.lang.IllegalArgumentException: width and height must be > 0"

It works OK for texts on labels.

<Label
  Margin="0,10"
  FontAttributes="Bold"
  FontFamily="FontAwesomeSolid"
  FontSize="Medium"
  HorizontalTextAlignment="Center"
  Text="{x:Static icons:FontAwesomeIcons.Video}"
  VerticalOptions="FillAndExpand" />

Tested on the most recent nightly builds.

For me it is working if I also add a label on the same page that uses the embedded font:
(The radio is the correct icon here)
Screen Recording 2020-04-20 at 13 53 07

My code can be found here: https://github.com/dhindrik/EmbeddedFontsBug

I am running it in Xamarin.Forms 4.6 pre-4.

Hello, I tried XF 4.6 pre-4 and it doesn't solve the issue on iOS(on android everything is fine). What I'm trying to do is to set FontImageSource as Tab.Icon. The interesting thing is if hot reload reloads the view the correct icon is shown.

I have the same problem on iOS. The font icons works in Labels, but not as FontImageSource (tested in ToolbarItem, Image and SfButton from Syncfusion). Android works without problems.

Used:

  • XF 4.6.0.726
  • XF.Essentials 1.5.3
  • Syncfusion 18.1.0.48

Hi to all,
I have problem with my hamburger menu (ShellContent) as @wagenheimer described. Label is ok, but ShellContent shows just blank space?

I'm having same issue on iOS devices for tabbedpage icons.
I've tested with XF 4.6.0.847 and XF 4.7.0.1080.
image

Android devices are Ok :
image

@samhouts : can you please fix this issue ?

@samhouts : would it be possible to have a fix for 4.8.0 milestone ?

I'm having same issue on iOS devices for tabbedpage icons.
I've tested with XF 4.6.0.847 and XF 4.7.0.1080.
image

Android devices are Ok :
image

@samhouts : can you please fix this issue ?

I've found a workaround :

  • Add your font file in your shared project as embedded ressource
  • Register your font in your app.xaml :
    [assembly: ExportFont("iconize-fontawesome-solid.ttf", Alias = "FontAwesomeSolid")]

  • Then set your icon in your XAML or C# file : example below for a tab icon in C#
    menu.IconImageSource = new FontImageSource { FontFamily = "FontAwesomeSolid", Glyph = "\uf0c9", Size = 25 };

Was this page helpful?
0 / 5 - 0 ratings