Search code examples
c#xamlxamarin.formsfont-awesomeglyph

How can I display a font awesome glyph in XAML/C#

I have tried many things in Visual Studio, but I still can not display a glyph.

  1. Do I need to add a NuGet package? Which?
  2. Do I need a 'using ...;' in C#?
  3. Do I need a 'xmlns:...' in XAML?
  4. Should I display it with a "Label"?

I know in HTML, you just add a class to your element. But I am stumped in XAML. (It's cross-platform, right?)

This should a simple thing but I can not get any answers to function. Please provide an answer if you can do this and answer all points.

Solution

  • There is a correct plugin for Xamarin.Forms. This plugin not only has FontAwesome Font.

    According to this example in github you must do the following:

    <StackLayout Orientation="Horizontal">
        <iconize:IconLabel FontSize="20" Text="{Binding Key}" TextColor="Green" VerticalTextAlignment="Center" />
</StackLayout>

    [UPDATE]

    On request from user3247130 I leave the complete example:

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

    • Xam.Plugin.Iconize
    • Xam.Plugin.Iconize.FontSwesome
    • Xam.FormsPlugin.Iconize

    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 iOS project, info.plist add 

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

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

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

    and 

    <iconize:IconLabel Text="fa-search"  />

    [UPDATE 2]

    This plugin has an issue on UWP platform. To run this plugin on UWP platform follow these steps:

    First, create a folder called Plugin.Iconize.FontAwesome.UWP into %userprofile%\.nuget\packages\xam.plugin.iconize.fontawesome‌​\2.0.0.29-beta\lib\U‌​AP10\

    Second, create another folder called Assets into Plugin.Iconize.FontAwesome.UWP folder

    Third create anoother folder called Fonts into Assets folder

    And finally copy iconize-fontawesome.ttf file (you shouldn't change their name).

    Additionally, you have to add a Fonts folder in the Assets folder in your UWP project and then paste the same ttf file

    This is not necessary on Android or iOS it is only a issue of the UWP platform