5

In xamarin forms using icon as png file is very painfull with all the sizeand native stuff that you need to do and verify. I decide to use font awesome but this way i can't put in toolbar item and neither in some button tha need a text too. Do anyone has a guide to use as fileimagesource because the fontimagesource is not compatible to use in place of fileimagesource. Or, anyone has a guide to do presseffect with some code that i can use in all my stuff?

This is not possible

<ContentPage.ToolbarItems>
        <ToolbarItem>
            <ToolbarItem.Icon>
                <FontImageSource/>
            </ToolbarItem.Icon>
        </ToolbarItem>
    </ContentPage.ToolbarItems>

this is the way it works

<ContentPage.ToolbarItems>
        <ToolbarItem>
            <ToolbarItem.Icon>
                <FileImageSource/>
            </ToolbarItem.Icon>
        </ToolbarItem>
 </ContentPage.ToolbarItems>

Other way was to put in label and use with layouts but both of them dosen't have the press effect

I expect to use the press effect without plugin, using a easy render maybe, or at least i want to use fonticon in toolber item like a normal image or text.

Obs: Text of toolbar item dosen't have fontfamily, if there's a way to do this with converter I will be grateful.

MatthewLC
  • 311
  • 4
  • 11
  • Possible duplicate of [Xamarin Forms Icons](https://stackoverflow.com/questions/44461120/xamarin-forms-icons) – Christian Gollhardt Apr 03 '19 at 11:31
  • I undesrtand the solution presented in Xamarin Forms Icons but theres anyway to do this only with what xamarin forms provide? In this case, I need to add a comment to that post in specifically? – MatthewLC Apr 03 '19 at 11:41
  • Do you want to achieve a press effect with custom label ? – Leon Apr 04 '19 at 08:29
  • Or custom font family in ToolbarItem like this link https://stackoverflow.com/questions/48934928/how-to-set-a-custom-font-family-in-the-xamarin-actionbar-title – Leon Apr 04 '19 at 08:37
  • Any way that is better.In fact now I using a layout with XamEffects plugin to do the press effect like a button, and i can add the the icon with label. I like the link above, but it dosen't have a solution for iOS. I will try to find thought. Anyway, I am trying to find a solution that accept either **toolbar icon font family _and button with span_** or **a simple press effect with custom render**. – MatthewLC Apr 05 '19 at 13:53
  • toolbar icon font family and button with span is better – Leon Apr 24 '19 at 10:08
  • Yes it's. But how achieve it? First, i can't use span and formatted text like i do in label, the two propertiers that have are text, icon, and fonto family. I would like to use both Icon and some text in the button but in the moment i couldent find a way. Second, icon in the toolbar donsen't accept fonticon as font family and the solution you gave there is not iOS solution. – MatthewLC Apr 26 '19 at 16:51
  • You want to achieve it in IOS? not in android? – Leon Apr 30 '19 at 01:59
  • I want to achieve in both and if posible with shared code only. For now, I am doing my own navigation title, and I using Xam.Effects to do press effects into layout that have a label with font family. – MatthewLC Apr 30 '19 at 11:00

1 Answers1

9

Now with Xamarin 4.0 new release, this it's possible. The follow code works just fine:

<Button  Text="Pesquisar">
    <Button.ImageSource>
         <FontImageSource Glyph="&#xf002;" FontFamily="{StaticResource FontIcon}"/>
    </Button.ImageSource>
</Button>

And this too:

<ContentPage.ToolbarItems>
    <ToolbarItem>
        <ToolbarItem.IconImageSource>
             <FontImageSource Glyph="&#xf002;" FontFamily="{StaticResource FontIcon}"/>
        </ToolbarItem.IconImageSource>
    </ToolbarItem>
</ContentPage.ToolbarItems>
MatthewLC
  • 311
  • 4
  • 11
  • 1
    How did you add the FontIcon? I am getting error that it is not supported in the StaticResource . – Ahmad ElMadi Jun 16 '19 at 19:41
  • Can you please share your code? Mine stayed like this: fontawesome-webfont.ttf#FontAwesome FontAwesome – MatthewLC Jun 19 '19 at 11:40
  • The firs version had some issues thought, like icon on navigation bar not working and breaking others icons on page and icon on button with material had some issues too. I am not sure if this all had been resolved but have a lot of services releases that resolve most of than. – MatthewLC Jun 19 '19 at 11:45
  • so basically you had to add the webfont.ttf , right ? i thought it would come by default – Ahmad ElMadi Jun 21 '19 at 09:28
  • Like Matthew said, there are issues with Font icons in the toolbar for Android: it works, but other font icons on the page will not work anymore. On the Forms github: https://github.com/xamarin/Xamarin.Forms/issues/6317. I implemented the workaround that is mentioned there, and that solves the problem. – Ed S Jun 21 '19 at 10:25
  • @AhmadElMadi if you are having doubts on where put the ttf files and how refence them in the application i suggest you read this [link](https://montemagno.com/using-font-icons-in-xamarin-forms-goodbye-images-hello-fonts/). Note that each application has their ouw folder and path to put in style(inside a resource dictionary that should be in your app.xaml ou page.xaml). – MatthewLC Jun 27 '19 at 14:15
  • Just to be sure, they do not come by default in any way ever. You have to download them and put in the especific folder of each project. Once again, this [post](https://montemagno.com/using-font-icons-in-xamarin-forms-goodbye-images-hello-fonts/) by MonteMagino is really usefull. If you have another doubts thought, please share your code for me be able to help. – MatthewLC Jun 27 '19 at 14:20
  • Remember to set the color for the icon in the FontImageSource, I spent quite some time looking into why the icon didn't show in my ToolbarItem...oops! – Ferran Salguero Aug 02 '19 at 21:27
  • Just upgraded to XF 4.2 and this is the answer, thanks! – Luis de Haro Oct 08 '19 at 23:40