My entire time , using xamarin forms to develop mobile applications , I was using Images and specific Icons. I was generating those icons using google Asset Studio .
Well , that was helpful , but there was a lot of waste of time even if google asset studio was there for us .
I mean , choosing the right picture , using the google asset studio to generate pictures for @1x, @2x, @3x, hdpi, xhdpi, xxhdi , later adding those picture to each folder and If you didn’t like the picture you should generate new ones.
What about one file and one source ?
A file that contains a lot of icons that you can access them with a specific code.
In font awesome you can find more than 1500 free icons that you can use .
In this article , we will not only use font awesome , but we are going to use Bootstrap and Material Font Icons too and we are going to see :
- How to get the Fonts .
- How to add the fonts to Xamarin.Forms Project .
- How to use Xaml to call the fonts .
- Demo APP with Source Code .
How to get the Fonts
First we are going to get the font awesome Font , from this Link you can download the zip file , extract it and get the otf file .
Next , we are going to download glyph icons file ” glyphicons-halflings-regular.ttf ” from this Link .
Finally we get Material design font icons from this Link.
Now if you have those 5 files , like in picture below , you are ready for the next step .
Adding the fonts to Xamarin.Forms Project
Now , after getting our files , we need to place them in :
- Android: Make sure to paste those file to Assets folder .
- UWP : Make sure to paste those file to Assets folder .
- iOS : Make sure to paste those file to Resources folder and edit the info.plist file by adding :
<array> <string>glyphicons-halflings-regular.ttf</string> <string>materialdesignicons-webfont.ttf</string> </array> <array> <string>Font Awesome 5 Brands-Regular-400.otf</string> <string>Font Awesome 5 Free-Regular-400.otf</string> <string>Font Awesome 5 Free-Solid-900.otf</string> </array>
Using Xaml to call the fonts
Now lets start using our fonts in Xaml , first , we are going to use font awesome .
now , let’s get the font that we need to use by copying the code like in the picture below
Now all you have to do is to past that code between &#x and (😉 just like in the picture below inside Text,
and as you can see , you can specify font size too .
Now ,let’s use Material Design , and for that we are going to use a website to get the codes that we are going to use for our font as the past example .
You need to upload the Material design file to this website to get the Icons like this :
Now , you need to replace the &#x , with the code after the \u inside Text .
Last we are going to use Bootstrap , for that I used w3schools to get all the font as you can see .
and simply , you should just use the code you found in there and place it inside Text .
and simply after doing these steps , you can see inside your app icons like in this demo
You can read more about Using Font Icons in this blog post by James Montemagno .
You can get the full code source from thins link .
Happy Fonts Day 🙂