Navigation Bar icon

[ignacioinnovo]

Dear Grial UI Kit Team,

Please, let me say that your product is great!

I have done an app with one icon in some screen and two icons in others placed in the Navigation Bar. In Android everything is OK, but in iOS the icons in the Navigation Bar appear not to be to the very right. They have some "margin". First, I realized that the size was not correct so I resize them to 44 x 44 pixels and 88 x 88 pixels (the @2x version). The "margin" have been reduced but is not to the right screen limit like in the Android version.

Could you please help me with this? What can I try to do to solve it?

Thank you in advanced, Ignacio.

[jpbrocca]

Hi @ignacioinnovo, thanks for your positive feedback!

About your question:

• Can you paste a screenshot showing your current results?
• How are you placing the icons in the NavBar? Are you using ToolBarItems, or perhaps a TitleView?

Regards and thanks, JP

[ignacioinnovo]

Hi @jpbrocca !

Yo totally deserve the positive feedback!

First of all, sorry for the delay in my response.

This is the code I´m using:

The icon size in the iOS project is 44x44 pixels and the @2x version is 88x88.

This is the way it looks on Android:

This is the way it looks on iPhone:

In iOS the "margins" of the image are bigger!

Thank you very much in advanced, Ignacio.

[jpbrocca]

Hi @ignacioinnovo, how are you?

It seems you forgot to paste the code :)

Regards, JP

[ignacioinnovo]

Hi @jpbrocca!

Yes! Sorry! The code I was referring to, is this:

<ContentPage.ToolbarItems>
    <ToolbarItem Icon="quit.png"  Order="Primary" Priority="0" Clicked="Quit_Clicked" />
    <ToolbarItem Icon="help.png" Order="Primary" Priority="1" Clicked="Help_Clicked" />
</ContentPage.ToolbarItems>

Thanks!

[ziasix1nine]

Hi... Can we use iconfont in toolbarItem? is there any way we can do that ?

[mrutter]

Hi @ZiaStansall, unfortunately Xamarin.Forms does not support iconfont.

The good news is that your can use the excellent plugin from @jsmarcus (Jeremy Marcus). Take at look at these:

• https://www.nuget.org/packages/Xam.Plugin.Iconize/
• https://github.com/jsmarcus/Iconize

Also, please refer to this issue: https://github.com/UXDivers/Grial-UI-Kit-Support/issues/234

Bye. -m

PS: just some troubles to install the fonts, but it finally works very well