In a previous article I explained how to use Font Awesome glyph icons in your native Android application. IonicFramework ships with IonicIcons included, but what if you wanted to include Font Awesome or any other font for that matter?
The following will show you how to include Font Awesome into your Android and iOS IonicFramework project.
Let’s start by creating a fresh Ionic project and including the iOS and Android platforms.
ionic start ExampleProject blank
ionic platform add android
ionic platform add ios
Now we need to download the fonts to include in our project. Go ahead and download the latest Font Awesome release and extract them. Copy the following font files into your www/fonts directory:
If the directory doesn’t exist, go ahead and create it.
Next we need to edit www/css/style.css to include this new font set for use in our project. Add the following lines:
Every time we want to use the Font Awesome set we just set our font family as fontawesome.
Now would be a good idea to include some icon css so we can actually use these icons in our Ionic application. Add the following to www/css/style.css so we can include a Google Wallet glyph:
The value I included for content is the unicode value for the glyph that I wanted to use. Lets create a button in our IonicFramework project that uses this Google Wallet icon:
<button class="button icon-google-wallet"></button>
And just like that we have 400+ glyphs at our fingertips to use in our project.
A video version of this article can be seen below.