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.  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.

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:

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:

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 Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • You are proving to be an invaluable resource, mate. Thanks so much for taking the time to provide these excellent tuts.

  • SAIFUL

    Thank you so much. This is awesome 🙂

  • Nic

    Thanks for the tutorial, definitely needed. Unfortunately its not working for me, I am getting a ‘font property font-family does not have generic default’ when setting the .icon-google-wallet:before { font-family: “fontawesome”; content: “\f1ee”; } and in the view, I get a button with no icon. I also watched your vid and its a very straight forward process. Any clues as to what might be happening?

    Thank you.
    Chuck

    • Hi Chuck,

      Are you getting this error on device, browser, or both? What version of Apache Cordova are you using?

      My first guess is you have a typo somewhere, but let’s start with my first two questions.

      Regards,

      • Thank you for the quick reply; you must live in front o the screen like me 🙂

        I am getting the error in my IDE (Webstorm), I am on a MacBook Pro and it s fresh install if Ionic Tabs and cordova is 3.6.3. As for the type error, I copied directly from your site and double checked. Below is my css, which I have in a sub-folder and not at the root, but the src resolves fine.

        @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;
        }

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

        • Hi Chuck,

          You had caught me right before I shut down 🙂

          I am not familiar with Webstorm. Does it preview in one of the popular browsers? Just to confirm, is your file structure like follows?:

          root/www/css/style.css
          root/www/fonts/fontawesome-webfont.eot
          root/www/fonts/fontawesome-webfont.woff
          root/www/fonts/fontawesome-webfont.ttf
          root/www/fonts/fontawesome-webfont.svg
          root/www/index.html

          If that looks like your structure, you mind putting your code on GitHub so I can have a look? The problem is probably something simple, but it is always the simple things that get the best of us.

          Regards,

          • Thanks for the reply…its been one of those days…

            Here is the code on GIT. Thank you for your help. https://github.com/studiorooster/font-awesome-test

          • Hi Chuck,

            You’re going to get a good laugh at this one. You have the following:

            However, you need it to read the following:

            After making that change, your code worked fine 🙂

            Regards,

          • Son of a gun… 🙂 I’ve looked at it a hundred times and it was right in front of me hiding in plain site…thank you so much. Have a great week.

          • No problem! Don’t forget to subscribe or follow me on Twitter. Lots of good tutorials coming

          • Nic

            Thank you ..it works 🙂 I also just subscribed and ma following you on Twitter. A follow-up question to benefit myself and your readers.

            Font-Awesome has several sizes, how would you size the icons?
            How would you place the icons in the tabs? I placed an icon in the tab like …. but it was too big and the top hid behind the tab bar.

            Thanks again.

  • Nic

    I figured out the tab. By default when you do ionic start myProject tabs, it adds tabs tabs-icon-top, when what I needed was tabs tabs-icon-only and then the icons formatted properly.

    • Hi Chuck,

      I’m glad you figured it out. When it comes to adjusting the icon size, it varies depending on placement. For example, if you wanted to adjust the size of an icon in the header you would do the following:

      If you wanted to adjust the icon size of a list item you would do the following:

      I had to use Firebug to properly do this, but you should get the idea.

      Regards,

      • Jose Weeks

        If you want to have the icon display in a tab above text do following:

  • James Warren Wilmans

    nice one, mate. thanks.

  • Tahir Samijen

    You saved me. Thanks

  • Is very useful for games in canvas! 😀

  • Bale

    Is there a way to include only the icons you need and not the whole icon library with your app?

    • I believe you’d have to reconstruct the font files to only include what you want. Not sure why you would want to since the library itself is rather small.

  • Leonardo Mendonça Piazzoli

    Thanks, nice tutorial.

  • Eliel F

    I’m still trying to find out a way to add custom icons to ionic framework (working with Intel XDK). Couldn’t understand how to do it so far no good articles available and easy to understand.

    • I’m sorry, but I’m not familiar with the Intel XDK. I made it very clear how to do this without the XDK in my video and writeup.

      Regards,

  • Afrim A.

    Hi, I’m working on an project and I found those Google Material design icons library and I’ve added to my project. And they seems to work correctly in the browser on PC and in the devices also when I browse from the url directly: http://diyheavens.com/mobile/v3 but after I builded the apk from phonegap build for testing purposes the icons are gone in android. Some doesn’t show at all some displays different icon but in strange places not lined properly. Those icons work in this way name_of_icon Is there a problem during the name convention during the process of compiling the apk? Or it is something else

    • My guess is that PhoneGap build is at fault. Can you try compiling and installing directly?

      • Afrim A.

        Hmm I’ve just tried building it locally I got late because I was unable to set the environment correctly but now I’ve builded it from the CLI but seems like it is the same result. Below is a screenshot https://uploads.disquscdn.com/images/29edcd9f15780dc30b6a3db3b4060dae43aeebc7ce8ddbd40df0ecac07ac4c82.jpg

        • I see icons in that screenshot. What’s the problem?

          • Afrim A.

            If you browse the link at the first comment and the screenshot taken from the device after it is builded for android you will notice the incorrect icons display. I mean about the icons on the list not bottom tabs icons

          • You are not using the fonts like I described in the tutorial. You need to figure out the unicode values for each of the font icons you wish to use and create a class for them.

            Regards,

          • Afrim A.

            Yes as I mentioned in the first commend I was using Google Material Design Icons, however that unicode thing it worked out just instead of setting class with :before pseudo element as per their documentation UNICODE seems to work fine thank you again

  • Leng

    Hi, it is great tutorial of implement font awesome. However, I embed font use Lao font in my ionic application and I follow your tutorial, just change the font source to Lao. It does not work on android version <4.4. It would be great if you could help me on that.

    • What font files did your font include? Are you sure your pathing is correct? Are there any errors? Does it work on any versions greater than 4.4?

      The more information you give me the better I can help you.

      Best,

      • Leng

        I put the fonts files I got from https://www.google.com/fonts/earlyaccess named “Noto Sans Lao” in www/fonts as your tutorial. I am sure that the path is correct since I follow your tutorial and it works with font awesome. I have tested on chrome browser and it works fine. After I installed on android Nexus version 4.3, it just shows blank.

        Thanks,

        • That is weird. Are you running it on the Nexus natively or are you trying to use Ionic Serve or similar? Can you try running it on a more recent version of Android?

          • Leng

            I am running it on Sumsung Galaxy Nexus with android version 4.3. I tested on Sumsung Grand Neo Plus with android version 4.4 and it works fine. Is it the problem of the device version or what?

          • That is incredibly weird that it works on some devices, but not others. I really don’t have a solution to this one. Maybe try posting in the forums stating that custom fonts work on some devices, but not others and see if anyone else ran into this problem as well?

            Sorry my friend.

          • Leng

            @nicraboy:disqus Thanks so much for your help and quick response. Appreciate that.

            Regards,

          • Sorry I didn’t have any better news to tell you. Seems weird that some devices would render it, but not others.

          • Leng

            @nicraboy:disqus Yes, I am really blockage with that. I have posted question in Stackoverflow via here http://stackoverflow.com/q/36327444/3852257 including code.

            Thanks,