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.
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).
Select the Start Using Free button.
And then the download button.
After downloading, extract the content of your zip file.
And copy the highlighted file to your Android's Assets folder and iOS's Resources folder.
Change the properties in both to match the images.
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.
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).
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)
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.
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...
This is great! Thanks for the resource and quick response, Rodrigo!
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.
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
Thank you so much! Extremely useful tutorial.