Tuesday, October 6, 2015

FontAwesome using Xamarin Forms and iOS

This is the same post as the one for Android, except this one is for iOS. I didn't really plan to write this one since the same info can be found https://blog.xamarin.com/custom-fonts-in-ios/. However, I got some comments about the previous post being incomplete, so I guess I have to complete myself.

Read this one first to get the background - http://www.johankarlsson.net/2015/09/fontawesome-using-xamarin-forms-and.html

I also moved the source to github since I might be adding stuff to it as I go along. Find it under johankson/awesome.

Here we go!

Download the font

Download the FontAwesome font and drop it in your Resource folder for the iOS project. Remember to change the "Copy to output directory" to "Always", otherwise you'll get a null reference exception.

Edit the info.plist file

In the root of your iOS project you'll find a file called info.plist. We need to add stuff to it by editing the file using a text editor. If you simply double click it then Xamarin Studio (or Visual Studio) will open a GUI for it. We don't want that. I recommend Sublime Text for all you text editing needs.


Add a key named UIAppFonts followed by an array. One entry in the array should point to the font, in this case the fontawesome.ttf. If you have multiple fonts just add more entries. Make sure you add the complete path if you add the font to a folder.

Edit the XAML

Add a FontFamily attribute to what ever control you'd like display an icon through. The FontFamily attribute will be ignored on Android so you still need the custom renderer covered in the last blog post. The XAML is from the file MyPage.Xaml in the Forms project.

The result

As expected, we see some FontAwesome icons. 



Extras

Remember that you can adjust the size and color by using the FontSize and TextColor properties. You can also add icons to buttons.

    <Button Text="&#xf041;" FontSize="40" FontFamily="FontAwesome" />

Summary

So you see that iOS is simpler than Android when it comes to using custom fonts. I also know at the time of writing I haven't created a Windows Phone solution yet. I will as soon as time permits.

9 comments:

  1. Awesome articles, both iOS and Android. I'm just curious if you know when you'll have something for WinPhone?

    ReplyDelete
    Replies
    1. I'm planning to write it as soon as I can. Currently I'm prepping for TechDays in Stockholm so I don't have that much time to spare. But hold in there, it's coming! :)

      Delete
    2. hi, i would like to want know about the WinPhone platform do you have a solution? Thanks!

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. I'm sorry I have not seen that? Any special circumstances or someway to reproduce the issue?

      Delete
    2. I'm sorry I have not seen that? Any special circumstances or someway to reproduce the issue?

      Delete
  3. Your tutorial does not state which of the 6 font awesome files one should copy. Furthermore your code snippets are in images, hence not copy/paste -able.

    ReplyDelete
  4. Will this code work in windows as well? Or Do I need to add something else to make it work for windows

    ReplyDelete
  5. Good Stuff! I wish Android app development was as easy as iOS. Thanks for writing this article

    ReplyDelete