12

I'm wondering how I can implement icons inside my Xamarin Forms app. I want to use something like glyphicons or font awesome. However, I have no idea how to implement it into my xaml/c# pages.

Ideally, I am aiming for something like this:

enter image description here

If someone could provide the code to display an icon like the search bar or three lines, that would be great. I can format it to look pretty. I'm struggling with how to actually pull in the icon!

Connor Meeks
  • 501
  • 1
  • 6
  • 19
  • Google turns up several hits of packages to support this. Did you even try searching first? – Jason Jun 09 '17 at 15:29
  • Yes, everything I've seen requires custom rendering and techniques that I cannot grasp. Iconize doesnt seem like it would work for windows phones. Could you please provide the names of packages that work for iOS, Android, and UWP? – Connor Meeks Jun 09 '17 at 15:37
  • @ConnorMeeks can you please see my answer, that is how I implemented it for the first time couple of years ago, very nice and easy and you don't need to be a Xamarin expert. – Nurhak Kaya Jun 09 '17 at 16:43
  • For custom fonts in xamarin forms you can use this [Blog](https://blog.verslu.is/xamarin/xamarin-forms-xamarin/using-custom-fonts-on-ios-and-android-with-xamarin-forms/) – Miguel Angel Muñoz Jan 25 '18 at 12:04
  • You can used the derived Unicodes here: https://github.com/fzany/Font-Awesome-Cheat-Charp – Olorunfemi Davis Oct 16 '18 at 16:43

2 Answers2

6

The easiest way may be is to use https://github.com/jsmarcus/Xamarin.Plugins

From Visual Studio or Xamarin Studio, install the following packages:

  • Xam.Plugin.Iconize
  • Xam.Plugin.Iconize.FontAwesome
  • Xam.FormsPlugin.Iconize

Note: you can install Xam.Plugin.Iconize.Material and many others similar if you want to.

In the Android project, MainActivity class, OnCreate() method add

FormsPlugin.Iconize.Droid.IconControls.Init(Resource.Id.toolbar);
Plugin.Iconize.Iconize.With(new Plugin.Iconize.Fonts.FontAwesomeModule());

In the iOS project, AppDelegate class, FinishedLaunching() method, add similar lines

FormsPlugin.Iconize.iOS.IconControls.Init();
Plugin.Iconize.Iconize.With(new Plugin.Iconize.Fonts.FontAwesomeModule())

Also, in the iOS project, info.plist add

<key>UIAppFonts</key>
<array>     
    <string>iconize-fontawesome.ttf</string>
</array>

Now, in your XAML where you have your toolbar, in tag, add

<ContentPage ...
xmlns:iconize="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize" ...
>

and 

<ContentPage.ToolbarItems>
    <iconize:IconToolbarItem Order="Primary" Clicked="..." Icon="fa-search" IconColor="White" />
</ContentPage.ToolbarItems>
Hussein Khalil
  • 1,395
  • 11
  • 29
Kevin Le - Khnle
  • 10,579
  • 11
  • 54
  • 80
5

Look at the new release of Xamarin Forms, the solution was made! I posted the anwser in https://stackoverflow.com/a/56257444/11305148

But there it go. 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