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>&nbsp; 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 🙂
16 comments. Leave new
Just wanted to say thanks. Following the instructions and it worked on the first try after I reran ionic serve.
Thanks for this. Just what i needed.
Thank you for the article. It works great !
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”;
Thanks for feedback!
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
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.
Thanks for the great explanation!
Having followed your process, how can I now use font awesome icons in an ionic tabIcon?
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.
Thanks a lot for your explanation. Worked a treat!
Thanks Chriz, worked 1st time out.
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
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.
There is nothing modified modified or added within the node_modules. You should only copy one of the config files to your project.
Excellent tuto!
Work exactly as explain at the first time !
Very clear and very simple 😉
Thanks a lot !
Thank you.