How to use Font Awesome in an Ionic Application

Oct 18, 2017

3 min read


There is an element of confusion when it comes to use FontAwesome in an Ionic Application. To include this fonts library in Ionic needs a bit of configuration and this step by step guide will provide just that.

Bootstrap an Ionic Application


Create a new Ionic application or you can follow these steps to include FontAwesome in your Ionic application. Nothing will break down.

GNU Bash icon

$ ionic start ionic-use-fontawesome

Now, install the FontAwesome package from npm and save it in the app's dependencies:

GNU Bash icon

$ npm install font-awesome --save

Type the above in the root folder of your app. This will add the font-awesome folder under node_modules. The --save option will include the package inside the dependencies section of package.json file.

Include the fonts


Now wander to the src/index.html file and add the following link tag just above build/main.css:

HTML icon

1<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
2<link href="build/main.css" rel="stylesheet" />

Add a Custom Copy Script


Ionic includes a copy script file that is called during the build process when the command ionic serve executes and it is responsible for moving specific and required resources from node_modules to the www folder such as ionicons.

The location of this script file is under node_modules folder:

Copy this file and paste in inside a new directory called config under the root directory of your Ionic application. Open the file and add fontawesome entries at the bottom of this file.

JavaScript icon

1copyFontawesomeFonts: {
2 src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
3 dest: '{{WWW}}/assets/fonts'
4 },
5 copyFontawesomeCss: {
6 src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'],
7 dest: '{{WWW}}/assets/css'
8 }

Include Custom Copy Script in package.json


We must include this custom script inside our package.json file to override the one where we copied the original file from. Open the package.json file and add this json code:

JSON icon

1"config": {
2 "ionic_copy": "./config/copy.config.js"
3 }

That’s it in the configuration part.

Use FontAwesome


To implement FontAwesome in this or any Ionic application after the above configuration, we try adding some fonts on our pre-generated home page.

HTML icon

2 <ion-navbar color="secondary">
3 <ion-title> FontAwesome Icons </ion-title>
4 </ion-navbar>
7<ion-content padding>
8 <ion-list>
9 <ion-item>
10 <i class="fa fa-battery-empty" style="color: red;"></i> Battery Level
11 Empty
12 </ion-item>
13 <ion-item> <i class="fa fa-battery-1"></i> Battery Level 1 </ion-item>
14 <ion-item> <i class="fa fa-battery-2"></i> Battery Level 2 </ion-item>
15 <ion-item> <i class="fa fa-battery-3"></i> Battery Level 3 </ion-item>
16 <ion-item>
17 <i class="fa fa-battery-4" style="color: green;"></i> Battery Level 4
18 </ion-item>
19 </ion-list>

There are more than 675 icons available in FontAwesome and I think a combination of both Ionicons and FontAwesome will be enough for some the applications out there. You can even style them, change their font-size and color as per your needs.

Full source code at this Github Repository

Originally Published at

Enjoyed this post? Sign up to my newsletter!

A periodic update about my recent blog posts and tutorials. Join 1300+ devs!

No spam, unsubscribe at any time!

Subscribe on Revue

HomeBlogNewsletterAbout meSpeakingEmail

©  2019-2022 Aman Mittal · All Rights Reserved