From the Command Prompt (Windows) or Terminal (Linux and Mac), execute the following commands:

Create a New Ionic 2 ProjectShell
  ionic start ExampleProject blank --v2 --ts
  cd ExampleProject
  ionic platform add ios
  ionic platform add android

 
Here we need to note that :

1. You have to be using the Ionic CLI that supports Ionic 2 applications.
2. Without using a Mac, you cannot 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:

Install Font Awesome To Ionic 2 ProjectShell
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:

ionic.config.jsJavaScript
  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:

ionic.config.js
  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:

ionic.config.jsJavaScript
  node_modules/font-awesome/scss'



This will make our work easy when include this directory ans use 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:

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

Remeber that here 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:

app/theme/app.core.scssSass
  @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:

app/pages/home/home.htmlXHTML
 <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:

app/pages/home/home.htmlXHTML
 
  <button>
    <ion-icon name="home"></ion-icon>
    Left Icon
  </button>

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

You should now have access to not only IonIcons, but Font Awesome icons as well if everything has functioned smoothly. 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. Hereby, we saw how to include Font Awesome, but the same rules can be applied to others. Earlier also in an Ionic Framework 1 application,, I did write about including Font Awesome. But things were very different in this case due to how Ionic 2 handles theming with SASS.