dotnet/maui

[Windows] Some icon fonts not working in unpacked apps

GuidoNeele opened this issue · 11 comments

GuidoNeele commented

Description

Some icon fonts are not working in unpacked apps when using them with FontImageSource. They do work when they are used with labels.

The icon fonts I tested:

  • Font awesome (doesn't work)
  • ionicons (works)
  • MaterialIcons (doesn't work)

image

<Button x:Name="CounterBtn"
        Clicked="OnCounterClicked"
        FontFamily="OpenSansSemibold"
        HorizontalOptions="Fill"
        ImageSource="{FontImage &#xf1b9;,
                                FontFamily=FontAwesome,
                                Color=White}"
        SemanticProperties.Hint="Counts the number of times you click"
        Text="Click me" />

<Button Clicked="OnCounterClicked"
        FontFamily="OpenSansSemibold"
        HorizontalOptions="Fill"
        ImageSource="{FontImage &#xf30c;,
                                FontFamily=ionicons,
                                Size=44}"
        SemanticProperties.Hint="Counts the number of times you click"
        Text="Click me" />

<Button Clicked="OnCounterClicked"
        FontFamily="OpenSansSemibold"
        HorizontalOptions="Fill"
        ImageSource="{FontImage Glyph=&#xe000;,
                                FontFamily=MaterialIcons,
                                Size=44}"
        SemanticProperties.Hint="Counts the number of times you click"
        Text="Click me" />

Steps to Reproduce

  1. Download attached reproduction repository
  2. Open solution
  3. Build SharedLib as Release
  4. Build MauiIconTest as Release
  5. Go to <repository_path>\MauiIconTest\bin\Release\net8.0-windows10.0.19041.0\win10-x64\
  6. Start MauiIconTest.exe

OR

  1. Start a new MAUI project
  2. Add FontAwesome font to Resources/Fonts directory
  3. Add font to MauiProgram.cs
.ConfigureFonts(fonts =>
{
    fonts.AddFont("FontAwesome.ttf", "FontAwesome");
    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
  1. Add the following lines to csproj
<WindowsPackageType>None</WindowsPackageType>
<WindowsAppSDKSelfContained>true</WindowsAppSDKSelfContained>
<WindowsAppSdkDeploymentManagerInitialize>false</WindowsAppSdkDeploymentManagerInitialize>
  1. Add button to MainPage
<Button Clicked="OnCounterClicked"
        HorizontalOptions="Fill"
        ImageSource="{FontImage &#xf30c;,
                                FontFamily=FontAwesome,
                                Size=44}"
        SemanticProperties.Hint="Counts the number of times you click"
        Text="FontAwesome" />
  1. Build application and run it.

Link to public reproduction project repository

https://github.com/GuidoNeele/MauiIconTest

Version with bug

8.0.20 SR4

Is this a regression from previous behavior?

No, this is something new, Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

net8.0-windows10.0.19041.0

Did you find any workaround?

No didn't find a workaround.
A workaround could be to use a different icon font than FontAwesome because ionicons does work.

Relevant log output

No response

RoiChen001 commented

Can repro this issue at Windows platform on the latest 17.10 Preview 4(8.0.20)

mattleibow commented

I see material icons is a .otf file, so that may not be supported - but I need to confirm. Was there anything in the logs?

I wonder if I have an issue in my targets file that is preventing something - I will have a look.

GuidoNeele commented

No it's not a problem with the targets file. If you move all fonts over to the Maui app, you'll get the same result. I just wanted to try out your targets file 🙂

mattleibow commented

OK, I managed to repro this, I have no idea why it is failing as there are no errors in the logs:

MauiApp4.zip

I will; have a look and try debug.

@rmarinho I think I recall you saying that you had an issue with FontAwesome in your app?

mattleibow commented

There are no errors in maui, so for some reason Win2D just does not draw the right thing. I'll log an issue with that team.

  • 👍2
BurkusCat commented

I'm fairly sure this is essentially the same issue that #21333 was except the title is more accurate in this issue here. I've had the same issue with materialdesignicons-webfont.ttf and I had hoped #21144 would fix the issue for me but it didn't. I tried converting the font into a few different font file formats but nothing worked. After PR #21144 I don't get any errors any more when running the app and wasn't able to find any useful logs to hint what might be going wrong.

jfversluis commented

/similarissues

github-actions commented

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

Closed similar issues:

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

  • 👎2
mattleibow commented

I figured out the issue. The font name had spaces and the Uri was encoding things.

  • 👍2
GuidoNeele commented

Just tried the nightly and fix #22646 indeed solved this issue.
Thanks @mattleibow!

BurkusCat commented

8.0.60 this appears to be fixed for me with material design icons. Thank you :)

  • ❤️1