ChrizTalk

Ionic 2 and Font Awesome using Sass

March 7, 2017ChrizIonic16 comments
If you like it, please share it:

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 🙂


If you like it, please share it:
Previous Post Using Google Fonts in Ionic 2 Next Post Ionic 3, Firebase and AngularFire2

16 comments. Leave new

Josue Plaza
March 20, 2017 8:46 pm

Just wanted to say thanks. Following the instructions and it worked on the first try after I reran ionic serve.

Reply
Charles Nettey
March 25, 2017 4:56 pm

Thanks for this. Just what i needed.

Reply
Benjamin Schulz-Robellaz
March 31, 2017 11:02 am

Thank you for the article. It works great !

Reply
Anibal
April 6, 2017 5:10 pm

Great article! A couple of enhancements:
1. Since we are integrating Sass, there is no need to copy the css file. This declaration can be removed: copyFontAwesomeCSS

2. Font awesome can by copied into assets folder: copyFontAwesome … dest: ‘{{WWW}}/assets/fonts’

3. Path to the font can be defined in app.scss: $fa-font-path: “../assets/fonts”;

Reply
Chriz
April 6, 2017 7:21 pm

Thanks for feedback!

Reply
Jacques Schalkwyk
May 25, 2017 9:58 am

Hi Chriz
I am running latest ionic and get this error.
File to import not found or unreadable: font-awesome. Parent style sheet:
/home/jacques/Development/repos/heyjoe/src/app/app.scss

L16: // automatically applied to the element in the app.
L17: @import ‘font-awesome’;
How do I resolve this.
Best regards
Jacques

Reply
Chriz
May 28, 2017 8:00 pm

Hi Jacques,
Sorry for the late response, but did you change the sass.config file?
You should add this line:
‘node_modules/font-awesome/scss’
Hope this will solve it.

Reply
Yoni
June 6, 2017 12:26 pm

Thanks for the great explanation!
Having followed your process, how can I now use font awesome icons in an ionic tabIcon?

Reply
Chriz
June 8, 2017 8:07 pm

The easiest way to do this is by changing the css of the ion-icon.
You could add something like this your app.scss file:
ion-icon[name=”star”]:before {
font-family: “FontAwesome”;
content: “\f024”;
}
This example will replace the star icon () with the FontAwesome flag icon.
You can find the content code (“\f024”) from the icon detail page (http://fontawesome.io/icon/flag/). Its called Unicode there.

Reply
KKMan
June 13, 2017 10:58 pm

Thanks a lot for your explanation. Worked a treat!

Reply
Dhameer
June 20, 2017 9:03 am

Thanks Chriz, worked 1st time out.

Reply
David Compton
June 28, 2017 11:46 pm

You can avoid having to update your config each time you update ionic/app-scripts by following the instructions here: https://stackoverflow.com/a/43917890/10135

Reply
Romain
August 4, 2017 9:15 am

Why would you modify or add things in nodes_modules ? That’s something ephemeral. Your solution is not suited for anything else than testing, barely.

Reply
Chriz
August 4, 2017 9:51 am

There is nothing modified modified or added within the node_modules. You should only copy one of the config files to your project.

Reply
Cesar Jacquet
September 25, 2017 7:11 am

Excellent tuto!
Work exactly as explain at the first time !
Very clear and very simple 😉
Thanks a lot !

Reply
Paul
November 17, 2017 5:47 pm

Thank you.

Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Ionic 3 and Firebase Facebook authentication using AngularFire2
  • Ionic 3 and Firebase authentication using AngularFire2
  • Ionic 3, Firebase and AngularFire2
  • Ionic 2 and Font Awesome using Sass
  • Using Google Fonts in Ionic 2

My Ionic 2 Theme

Please have a look at my new Ionic 2 theme.

&copy 2016 ChrizTalk