Using Font Awesome in Xamarin.Forms 
Tags: fontawesome, icons, mobile, xamarin
Published: 2019-03-15 01:43:57

---
title: Using Font Awesome in Xamarin.Forms 
published: true
description: How to set up your Xamarin.Forms project to use Font Awesome icons
tags: FontAwesome, icons, Mobile, Xamarin
---
# This approach is outdated since Xamarin.Forms 4.5.530

You can get information about the new functionality [here](https://devblogs.microsoft.com/xamarin/embedded-fonts-xamarin-forms/)

# Using Font Awesome in Xamarin.Forms

All the code for this post is available at [github](https://github.com/rodrigojuarez/XamFormsFontAwesome)

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](https://thepracticaldev.s3.amazonaws.com/i/epaj50abh1zvkmp1bd53.png)

## 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](https://thepracticaldev.s3.amazonaws.com/i/o3vbwreee20m9jxequwh.png)

Select the Start Using Free button.

![download button](https://thepracticaldev.s3.amazonaws.com/i/j9ple51a3d6bdz0252tt.png)

And then the download button.

![extract content](https://thepracticaldev.s3.amazonaws.com/i/jxn4db3ebmr7rilm9bhe.png)

After downloading, extract the content of your zip file.

![copy files](https://thepracticaldev.s3.amazonaws.com/i/i3nnctlyba47z51w18ps.png)

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

![set properties 1](https://thepracticaldev.s3.amazonaws.com/i/ps2ubwld9absmerwgius.png)

![set properties 2](https://thepracticaldev.s3.amazonaws.com/i/uhqn2ikeudawe14c0io1.png)

Change the properties in both to match the images.

![set info.plist](https://thepracticaldev.s3.amazonaws.com/i/jx0cg5xncwcrbczjolty.png)

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](https://fontawesome.com/cheatsheet?from=io) 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](https://thepracticaldev.s3.amazonaws.com/i/mc6ttwa26ubxo8g6zv3h.png)

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](https://thepracticaldev.s3.amazonaws.com/i/091hlep1hktg8xmsxj98.png)

![returned value](https://thepracticaldev.s3.amazonaws.com/i/oryeadd5ppinhlhycin5.png)

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