Ionic 2 and Font Awesome using Sass

In my previous post Ionic 2 and Font Awesome I showed you how to use Font Awesome in your Ionic 2 app. In this post I will do the same :), but I will do it the sass way.

Here’s how to do it:

Start by creating a new application or cd to your existing application folder.

$ ionic start ionic2FontAwesomeSass blank --v2
$ cd ionic2FontAwesomeSass

Let’s add Font Awesome and save it to your package.json.

$ npm install font-awesome --save

Create config folder on project root.

$ mkdir config

Find the copy.config.js and sass.config.js files in the folder: /node_modules/@ionic/app-scripts/config/
and copy them to the folder you just created.

Update the copy.config.js file as below:

module.exports = {
copyAssets: {
src: ['{{SRC}}/assets/**/*'],
dest: '{{WWW}}/assets'
},
copyIndexContent: {
src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],
dest: '{{WWW}}'
},
copyFonts: {
src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
dest: '{{WWW}}/assets/fonts'
},
copyPolyfills: {
src: ['{{ROOT}}/node_modules/ionic-angular/polyfills/polyfills.js'],
dest: '{{BUILD}}'
},
copyFontAwesome: {
src: '{{ROOT}}/node_modules/font-awesome/fonts/**/*',
dest: '{{WWW}}/fonts/'
}
}

Update the sass.config.js file as below:

module.exports = {
outputFilename: process.env.IONIC_OUTPUT_CSS_FILE_NAME,
sourceMap: false,
outputStyle: 'expanded',
autoprefixer: {
browsers: [
'last 2 versions',
'iOS >= 8',
'Android >= 4.4',
'Explorer >= 11',
'ExplorerMobile >= 11'
],
cascade: false
},
includePaths: [
'node_modules/ionic-angular/themes',
'node_modules/ionicons/dist/scss',
'node_modules/ionic-angular/fonts',
'node_modules/font-awesome/scss'
],
includeFiles: [
/\.(s(c|a)ss)$/i
],
excludeFiles: [
/*  /\.(wp).(scss)$/i  */
],
variableSassFiles: [
'{{SRC}}/theme/variables.scss'
],
directoryMaps: {
'{{TMP}}': '{{SRC}}'
},
excludeModules: [
'@angular',
'commonjs-proxy',
'core-js',
'ionic-native',
'rxjs',
'zone.js'
]
};

Next change package.json so it uses the new config copy and sass files:

...
"scripts": {
"build": "ionic-app-scripts build",
"watch": "ionic-app-scripts watch",
"serve:before": "watch",
"emulate:before": "build",
"deploy:before": "build",
"build:before": "build",
"run:before": "build"
},
"config": {
"ionic_copy": "./config/copy.config.js",
"ionic_sass": "./config/sass.config.js"
},
"dependencies": {
...

Add this line in src/app/app.scss to import the font-awesome css.

...
@import 'font-awesome';
...

Change page/home/home.html to check if it’s working:

<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h1><i class="fa fa-flag" aria-hidden="true"></i>  Font Awesome</h1>
</ion-content>

Check it out:

$ ionic serve

Enjoy it!

You can download a working version here.

If you want to read about using other fonts in your Ionic 2 app you can read my post on https://chriztalk.com/using-google-fonts-ionic-2/.

Or buy my customizable theme on Gumroad that uses this Font Awesome integration 🙂