Xamarin.forms: [Bug] Cropped Icon from ImageFont in ToolbarItem

Created on 24 Feb 2020  路  12Comments  路  Source: xamarin/Xamarin.Forms

Description

icon from imagefont will not be displayed correct in toolbar item.
icon is cut off at the top.
imagefont was exported from syncfusion "metro studio 5".

XAML Code

App.xaml

<OnPlatform x:TypeArguments="x:String" x:Key="Court4UIconFont">
    <On Platform="Android"  Value="court4u_iconfont.ttf#Regular" />
    <On Platform="iOS".        Value="court4u_iconfont" />
</OnPlatform>

MainPage.xaml (NavigationPage)

<ContentPage.ToolbarItems>
    <ToolbarItem Order="Primary">
        <ToolbarItem.IconImageSource>
            <FontImageSource FontFamily="{StaticResource Court4UIconFont}"
                    Glyph="&#xe704;" />
        </ToolbarItem.IconImageSource>
    </ToolbarItem>
    <ToolbarItem Order="Primary">
        <ToolbarItem.IconImageSource>
            <FontImageSource FontFamily="{StaticResource Court4UIconFont}"
                    Glyph="&#xe709;" />
            </ToolbarItem.IconImageSource>
        </ToolbarItem>
    <ToolbarItem Order="Secondary" Text="Anmelden" Priority="1" >
    </ToolbarItem>
</ContentPage.ToolbarItems>

Basic Information

bug available on iOS and Android at Emulator/Simulator and physical device

Screenshots

Bildschirmfoto 2020-02-24 um 10 36 52

Used ImageFont

https://1drv.ms/u/s!AvfMdSsMYykdjb8_7KWYk3LpMW6TSA?e=h7zl6U

fonticon toolbar low Android iOS 馃崕 bug

Most helpful comment

I received a response from Syncfusion support regarding this issue. Based on the information they provided, I have confirmed that this issue is resolved in version 5.0.1.2 of the Metro Studio product.

All 12 comments

You can change the font size

changing the fontsize has no effect:
image

I have done some tests with different fonts in a repro sample:
Issue9688.zip

And the size seems correct:
Captura de pantalla 2020-02-25 a las 14 01 09
(This is using the Material Design Icons)

Could the issue be related to the font, etc.?, could you test it with a different font?.

ok, with other image font it works. now I use the 'Segoe MDL2 Assets' from Windows 10.
Bildschirmfoto 2020-02-25 um 14 13 50

the app.resource
Bildschirmfoto 2020-02-25 um 14 17 46

I'm glad to read that it worked for you with another font.

I, too, can confirm this problem (trying to use within a tab icon). I have tried adjusting padding and size from within Metro Studio before exporting to ttf and also trying to adjust Size in the FontImageSource, but without success.

It's too bad, because, there are very many nice royalty-free icons in the set that all cannot be used because of this. Not sure what about the fonts makes it that way.

I have recently run into this problem as well and happened to stumble upon this issue. I suspect this issue is somehow caused by the way Metro Studio is generating the icon font. If I export an icon using the Metro Studio application and then use it to generate an icon font using a free online tool (such as Fontello) the issue does not present itself. I have an open support case with Syncfusion but they have yet to determine the cause (if it is indeed their issue to solve).

I received a response from Syncfusion support regarding this issue. Based on the information they provided, I have confirmed that this issue is resolved in version 5.0.1.2 of the Metro Studio product.

@jrichmeier: back when I commented on this on Mar 2nd, I had submitted a case to Syncfusion and received verification that they could reproduce the problem: https://www.syncfusion.com/support/directtrac/incidents/267907

I was also told that this was going to be fixed in a future release, but did not know exactly which release that would be and so it is good that you got an exact version number.

I have the same issue with Metro Studio 5.0.1.1 but as of today, the free version 5.0.1.2 is not yet available to download... When will it be?

i think that you should ask this to syncfusion support :D

Was this page helpful?
0 / 5 - 0 ratings