ChrizTalk

Ionic 2 and Font Awesome

October 19, 2016ChrizIonic33 comments
If you like it, please share it:

In my previous Ionic (1.3) apps I used Font Awesome as an icon set, but in Ionic 2 a lot has changed. The gulp script I used for it is gone and the build process is defined in the npm packages.
You can read more about it on https://github.com/driftyco/ionic-app-scripts

Here’s how to do it in Ionic 2:

Let’s start by creating a new application or cd to your existing application folder.

$ ionic start ionic2FontAwesome blank --v2
$ cd ionic2FontAwesome

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 file in this folder: /node_modules/@ionic/app-scripts/config/copy.config.js
and copy it to the folder you just created.
Update the 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}}'
  },
  copyFontAwesomeCSS: {
      src: '{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css',
      dest: '{{WWW}}/assets/css/'
  },
  copyFontAwesome: {
    src: '{{ROOT}}/node_modules/font-awesome/fonts/**/*',
    dest: '{{WWW}}/assets/fonts/'
  }
}

Next change package.json so it uses the new config copy file:

  ...
  "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"
  },
  "dependencies": {
  ...

Add this line in src/index.html above the build/main.css to include the font-awesome css file.

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

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

If you want to see how to do it the sass way, you can check my post Ionic 2 and Font Awesome using Sass.

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:
: font awesome
Previous Post Angular 2 show/hide password component Next Post Hosting Angular app in Azure using ASP.NET Core

33 comments. Leave new

Mike Darling
December 19, 2016 11:52 pm

This is a great tutorial – THANK YOU as there isn’t much out there about this yet (applied to the newest Ionic 2 file structure). That said, having gone through each step (creating a new/test project as outlined), it builds and runs without error… but still the font-awesome icon is not showing(!) Any thoughts or suggestions?

npm v 4.0.2
node v 6.7.0
Ionic Framework v 2.0.0-rc.4

Reply
henkie14
December 20, 2016 12:00 pm

Thanks for letting me know.
There was a change in copy.config.js in Ionic 2 RC4.
I’ve update the blog and it should be working again, I will also create a repository on GitHub.
Please let me know if you get it working now!

Reply
Mike Darling
December 20, 2016 4:09 pm

Perfect – works great! Many thanks… I will post links to your page from some of the other discussions out there on the topic. Really appreciate your fast response!

Reply
Robert
January 9, 2017 4:21 pm

Hi thanks very much for cool tutorial!
I receive an error following it. Maybe you can help please.
RobertsMini114:ionic2FontAwesome rs$ ionic serve

> ionic-hello-world@ ionic:serve /Applications/MAMP/htdocs/ion2/ion2/ionic2FontAwesome
> ionic-app-scripts serve –v2 –address 0.0.0.0 –port 8100 –livereload-port 35729

Caught exception:
TypeError: undefined is not a function
at Socket. (/usr/local/lib/node_modules/ionic/lib/utils/npmScripts.js:83:49)
at Socket.emit (events.js:129:20)
at readableAddChunk (_stream_readable.js:163:16)
at Socket.Readable.push (_stream_readable.js:126:10)
at Pipe.onread (net.js:529:20)

Mind letting us know? https://github.com/driftyco/ionic-cli/issues

keywords if/then/else require v5 option
module.js:338
throw err;
^
Error: Cannot find module ‘reflect-metadata’
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (/Applications/MAMP/htdocs/ion2/ion2/ionic2FontAwesome/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:1)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)

npm ERR! Darwin 16.1.0
— skipped the rest —

I am on MAC OS Sierra and a newbie. Btw same error happened with your customizable theme on Gumroad I bought
thanks
Robert

Reply
henkie14
January 9, 2017 5:04 pm

Hi Robert,
Could you please check your node version (node -v) and sent me the results?

Reply
Robert
January 9, 2017 7:02 pm

Hi henkie14

RobertsMini114:ionic2FontAwesome rs$ node ng -v
module.js:338
throw err;
^
Error: Cannot find module ‘/Applications/MAMP/htdocs/ion2/ion2/ionic2FontAwesome/ng’
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Function.Module.runMain (module.js:501:10)
at startup (node.js:129:16)
at node.js:814:3
RobertsMini114:ionic2FontAwesome rs$

as regards Angular I am afraid I don*t know probably it is not installed at all. Is there a way to check with a cli command?
thks Robert

Reply
henkie14
January 9, 2017 7:07 pm

Please try ‘node -v’ instead of ‘node ng -v’.

These are the versions I’m using:
imac:ionic2FontAwesome chagens$ node -v
v6.9.4
imac:ionic2FontAwesome chagens$ npm -v
3.10.8
imac:ionic2FontAwesome chagens$ ionic -v
2.1.18
imac:ionic2FontAwesome chagens$ cordova -v
6.4.0

Reply
Robert
January 9, 2017 7:15 pm

RobertsMini114:ionic2FontAwesome rs$ node -v
v0.12.0

Reply
henkie14
January 9, 2017 7:22 pm

Just download and install the latest (6.9.4) node version from https://nodejs.org/en/

You might have to update ionic and cordova too by running ‘npm install -g cordova’ and ‘npm install -g ionic’.

If the ionic installation is giving errors try to uninstall it first ‘npm uninstall -g ionic’ and then install it again.

Reply
Robert
January 10, 2017 7:14 am

OK Wunderbar mein Freund (tres cool mon ami) thanks its working fine now!

Arun
January 21, 2017 6:49 pm

above steps worked for me . Thans ChrizTalk

Reply
Fray
February 8, 2017 11:48 am

This is a great tutorial , thank you !!
Is it the some way to add another font ? if not, how can i add an external font to my ionic 2 app ?
Thanks again

Reply
Chriz
February 8, 2017 7:31 pm

You can basically add any font as long you have the source files of the font.
For example: If you want to use a Google Font, let’s take Barrio, you can find the woff2 files in the import url of the font: https://fonts.googleapis.com/css?family=Barrio.
Take the url from the latin font-face (used for most Western European languages) : https://fonts.gstatic.com/s/barrio/v1/N2_l9UdKOoL83CQFCx4DGOvvDin1pK8aKteLpeZ5c0A.woff2
You can copy (and rename) this woff2 file to the fonts folder of your application and add something like this in your app.scss file:
@font-face{
font-family: Barrio;
src: url(‘../assets/fonts/Barrio.woff2’) format(‘woff2’);
}
h1{ font-family: Barrio;}

Reply
Fray
February 8, 2017 8:13 pm

Thanks dude 😀 it works ^^

Reply
Fray
February 8, 2017 10:13 pm

Sorry, but, the font don’t works in the android emulator.

Reply
Chriz
February 8, 2017 10:28 pm

Woff2 is not yet supported in al browsers. It works on my Android phone, but don’t know what emulator you are using.
See http://caniuse.com/#search=WOFF2

Reply
Fray
February 9, 2017 10:36 am

Yes, it was a problem with my emulator, it works.
Thank you

Robindoid
February 17, 2017 4:45 pm

thank you so much bro. it works.

Reply
Dimitri
February 18, 2017 4:35 pm

I followed your awesome tutorial, and managed to display in the browser a “square” (not an icon, but at least something), and I see that I get the following errors in the console. Any ideas what I might have done wrong? My versions around within 0.0.2 from yours, some older some newer, but no more than 0.0.2 from yours. Thanks so much!!

VM30345 ?ionicplatform=ios&ionicstatusbarpadding=true:1 GET http://localhost:8100/assets/fonts/fontawesome-webfont.woff2?v=4.7.0
VM30345 ?ionicplatform=ios&ionicstatusbarpadding=true:1 GET http://localhost:8100/assets/fonts/fontawesome-webfont.woff?v=4.7.0
VM30345 ?ionicplatform=ios&ionicstatusbarpadding=true:1 GET http://localhost:8100/assets/fonts/fontawesome-webfont.ttf?v=4.7.0

Reply
Chriz
February 18, 2017 7:04 pm

Looks like the Font Awesome files are not in place.
Are you sure you did the npm install and you created the copy.config.js file correctly?
And could you check the ionic version and ionic/app-scripts version in your package.json…

Reply
Dimitri
February 18, 2017 8:34 pm

Thanks for your prompt reply!
ionic – 2.1.14
@ionic/app-scripts”: “^1.1.2”

And yes, I did npm correctly and copied the copy.config.js file correctly.

Reply
Dimitri
February 18, 2017 8:50 pm

I fixed it by running “ionic build” command! I think before you build it, the package.json and/or copy.config.js aren’t run, so gives an error as if the css files aren’t there.

Do you think that is it?

Reply
Chriz
February 18, 2017 9:58 pm

As far as I know you don’t need to run ionic build.
I tested it using your versions and it worked on my machine by running just “ionic serve”…

Reply
Dimitri
February 18, 2017 10:15 pm

Must have been something else than, because I’ve deleted and than re npm-ed install the fonts.

Somecallmemike
February 21, 2017 7:47 pm

I got the icons to appear using the tag method, but how would I use FA icons in or components?

Reply
Somecallmemike
February 21, 2017 7:48 pm

Sorry formatting got lost, I want to use FA icons in ion-tab and ion-icon, how would I go about implementing that?

Reply
Chriz
February 21, 2017 8:47 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
Juan David Maldonado Gómez
March 6, 2017 12:55 am

Thanks for the post, it was very useful, it works great, but each time that i run `ionic serve`, the code that i added in *index.html* is erased … ·
any idea ?

Reply
Chriz
March 6, 2017 1:57 pm

Hi Juan, Can it be, you are editing the index.html in the www folder instead of the one in the src folder?

Reply
Anjali
April 7, 2017 6:36 am

very nice tutorial… Thank you!

Reply
RockStar_T
April 11, 2017 1:27 pm

Great tut! Thanks!

Reply
amit pamecha
February 4, 2018 8:03 am

Nice explanation! Thanks, keep posting!

Reply
Henoc Salinas
April 23, 2018 11:18 pm

Excelente

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