Use Font Awesome Glyph Icons With Ionic Framework

In a previous article I explained how to use Font Awesome glyph icons in your native Android application. Ionic Framework 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 Ionic Framework project.

Let’s start by creating a fresh Ionic project and including the iOS and Android platforms.

ionic start ExampleProject blank
cd ExampleProject
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:

• fontawesome-webfont.ttf
• fontawesome-webfont.eot
• fontawesome-webfont.svg
• fontawesome-webfont-woff
• fontawesome-webfont.otf

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:

@font-face {
    font-family: 'fontawesome';
    src:url('../fonts/fontawesome-webfont.eot');
    src:url('../fonts/fontawesome-webfont.eot') format('embedded-opentype'),
        url('../fonts/fontawesome-webfont.woff') format('woff'),
        url('../fonts/fontawesome-webfont.ttf') format('truetype'),
        url('../fonts/fontawesome-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

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:

.icon-google-wallet:before {
    font-family: "fontawesome";
    content: "\f1ee";
}

The value I included for content is the unicode value for the glyph that I wanted to use. Lets create a button in our Ionic Framework 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.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.