Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Use Font Awesome Icons In Your Ionic Android And iOS App

TwitterFacebookRedditLinkedInHacker News

Creating your own in-app icons can be a real pain. Having to worry about all the different Android and iOS icon sizes is not a pleasant task, specially when web developers have it easy with icon packs like Font Awesome. Lucky for us, Ionic is a mobile web application, so we can enjoy the same benefits that web developers have.

Previously, I demonstrated how to include Font Awesome into an Ionic Framework 1 application, but that version of the framework is becoming old news because Ionic 2 is stealing the spotlight.

This time around we’re going to see how to use the 400+ icon fonts that Font Awesome offers in our Ionic 2 Android and iOS application.

Let’s create a new Ionic 2 Android and iOS project. From the Command Prompt (Windows) or Terminal (Linux and Mac), execute the following commands:

ionic start ExampleProject blank --v2 --ts
cd ExampleProject
ionic platform add ios
ionic platform add android

A few important things to note. You must be using the Ionic CLI that supports Ionic 2 applications. You must also be using a Mac if you wish to add and build for the iOS platform.

We can include Font Awesome into our project through the Node Package Manager (NPM). With your project as the current working directory, execute the following command:

npm install font-awesome

The font data which includes CSS and font files will now exist in the node_modules directory so it is our job to include them for use.

Open the project’s ionic.config.js file and make it look similar to the following:

module.exports = {
    proxies: null,

    paths: {
        html : {
            src: ['app/**/*.html'],
            dest: "www/build"
        },
        sass: {
            src: ['app/theme/app.+(ios|md).scss'],
            dest: 'www/build/css',
            include: [
                'node_modules/ionic-framework',
                'node_modules/ionicons/dist/scss',
                'node_modules/font-awesome/scss'
            ]
        },
        fonts: {
            src: ['node_modules/ionic-framework/fonts/**/*.+(ttf|woff|woff2)', 'node_modules/font-awesome/fonts/**/*.+(eot|ttf|woff|woff2|svg)'],
            dest: "www/build/fonts"
        },
        watch: {
            sass: ['app/**/*.scss'],
            html: ['app/**/*.html'],
            livereload: [
                'www/build/**/*.html',
                'www/build/**/*.js',
                'www/build/**/*.css'
            ]
        }
    },

    autoPrefixerOptions: {
        browsers: [
            'last 2 versions',
            'iOS >= 7',
            'Android >= 4',
            'Explorer >= 10',
            'ExplorerMobile >= 11'
        ],
        cascade: false
    },

    // hooks execute before or after all project-related Ionic commands
    // (so not for start, docs, but serve, run, etc.) and take in the arguments
    // passed to the command as a parameter
    //
    // The format is 'before' or 'after' + commandName (uppercased)
    // ex: beforeServe, afterRun, beforePrepare, etc.
    hooks: {
        beforeServe: function(argv) {
            //console.log('beforeServe');
        }
    }
};

Most of this file was left as the default with two exceptions. In the sass property we have the following:

sass: {
    src: ['app/theme/app.+(ios|md).scss'],
    dest: 'www/build/css',
    include: [
        'node_modules/ionic-framework',
        'node_modules/ionicons/dist/scss',
        'node_modules/font-awesome/scss'
    ]
},

More specifically the following line:

'node_modules/font-awesome/scss'

When we include this directory we can do imports without having to worry about all the paths to find the files we need. The Font Awesome SCSS files become visible from a root level.

The second change in the ionic.config.js file is found in here:

fonts: {
    src: ['node_modules/ionic-framework/fonts/**/*.+(ttf|woff|woff2)', 'node_modules/font-awesome/fonts/**/*.+(eot|ttf|woff|woff2|svg)'],
    dest: "www/build/fonts"
},

Notice that we’re adding the font files to the build directory so they can be accessed via our compiled application.

With the packaging stuff out of the way we can now prepare the fonts fore use. Open the project’s app/theme/app.core.scss file and add the following line:

@import 'font-awesome';

Remember we previously set up access to all the Font Awesome SCSS files at the root level which is why we didn’t have to do any path manipulations.

At this point in time we can now use Font Awesome as described in the official documentation. Let’s give it a shot. Open the project’s app/pages/home/home.html file and change it to look like the following:

<ion-navbar *navbar>
    <ion-title>
        Home
    </ion-title>
</ion-navbar>

<ion-content class="home">
    <button>
        <span class="fa fa-google-wallet"></span>
        Wallet
    </button>
</ion-content>

It is pretty similar to how the Ionic 2 documentation describes how to use icons. In the Ionic 2 documentation it says to do something like this:

<button>
    <ion-icon name="home"></ion-icon>
    Left Icon
</button>

Notice we are swapping <ion-icon> with <span> tags.

If everything went well you should now have access to not only IonIcons, but Font Awesome icons as well. The same rules can be applied if you wish to include other icon packs as well.

Conclusion

You just saw how to include additional icon packs within your Ionic 2 application. In this case we saw how to include Font Awesome, but the same rules can be applied to others. I did write about including Font Awesome in an Ionic Framework 1 application, but as we can see things were very different in this case due to how Ionic 2 handles theming with SASS.

Nic Raboy

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.