DEV Community

Rodrigo Juarez for Coding Coach

Posted on • Updated on • Originally published at rodrigojuarez.com

Using Font Awesome in Xamarin.Forms

This approach is outdated since Xamarin.Forms 4.5.530

You can get information about the new functionality here

Using Font Awesome in Xamarin.Forms

All the code for this post is available at github

If you want to have a consistent user interface in your Xamarin Forms application, it could be a good approach to try to use vector icons.

For that, I will show you in this blog post, how you can include Font Awesome in your Xamarin Forms project to show icons like in this sample.

Finished app

Installation

First you will need to download the icons from the Font Awesome site (in this post we are using the free web version 5.7.1).

font awesome site

Select the Start Using Free button.

download button

And then the download button.

extract content

After downloading, extract the content of your zip file.

copy files

And copy the highlighted file to your Android's Assets folder and iOS's Resources folder.

set properties 1

set properties 2

Change the properties in both to match the images.

set info.plist

For iOS you need to change the info.plist file and include the new font file.

Create support classes

After the installation is complete, we are going to create a derived class from Label to show our text using Font Awesome.

The class is called FontAwesomeIcon in our sample project.

For Android that class needs a renderer (FontAwesomeIconRenderer.cs).

The icon definitions are in the Icon.cs file, you could add any other icon that you need looking for the icon in this link and using the unicode representation.

Using our custom label to show icons

To show an icon in a view with xaml, create a tag like the three that we have in MainPage.xaml, setting the text to one of our defined icons in the Icon class.

using

And that's all you need to start using Font Awesome!!

Pro tip

You could have noticed that the name of the font used in the FontAwesomeIcon.cs file depends on the platform, the android version is just the name of the ttf file, but for iOS we need the name of the font. In some tutorials they mention that you could check the properties of the file in Windows Explorer and take the name from there, but for the FontAwesome version that we are using for this post, that's not true.

You can see the name of the font in the console of Visual Studio when you run the iOS version because we have this code in place (AppDelegate.cs).

cicle code

returned value

This will be very useful if you want to use another version of the font, but you don't know the name.

Top comments (6)

Collapse
 
tayloracox profile image
Taylor Cox

Thank you so much for putting this together! Is it possible to use a similar approach to utilize FontAwesome as text on standard XAML elements like Button and Label?

I'm wanting to put a FontAwesome icon as the text of a button but am unsure of how to utilize the namespace inside of the Button element.

Collapse
 
rodrigojuarez profile image
Rodrigo Juarez

I think this has changed since I wrote that post. Please take a look at this information from James Montemagno montemagno.com/using-font-icons-in...

Collapse
 
tayloracox profile image
Taylor Cox

This is great! Thanks for the resource and quick response, Rodrigo!

Collapse
 
ayaamer profile image
Aya-Amer

First thanks for this Article. you help me a lots in my project.
i need to ask about something I'm starting in xamarin and i use font awesome in my project but i can't put font awesome as text inside a button can you help me in that.

Collapse
 
rodrigojuarez profile image
Rodrigo Juarez

Hi!
Did you take a look at this related link?
montemagno.com/using-font-icons-in...
If you still have issues, please let me know what are you trying to do, what is not working, and I will try to help

Collapse
 
fabperez profile image
Fabricio

Thank you so much! Extremely useful tutorial.