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> 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 🙂
33 comments. Leave new
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
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!
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!
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
Hi Robert,
Could you please check your node version (node -v) and sent me the results?
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
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
RobertsMini114:ionic2FontAwesome rs$ node -v
v0.12.0
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.
OK Wunderbar mein Freund (tres cool mon ami) thanks its working fine now!
above steps worked for me . Thans ChrizTalk
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
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;}
Thanks dude 😀 it works ^^
Sorry, but, the font don’t works in the android emulator.
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
Yes, it was a problem with my emulator, it works.
Thank you
thank you so much bro. it works.
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
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…
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.
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?
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”…
Must have been something else than, because I’ve deleted and than re npm-ed install the fonts.
I got the icons to appear using the tag method, but how would I use FA icons in or components?
Sorry formatting got lost, I want to use FA icons in ion-tab and ion-icon, how would I go about implementing that?
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 (
You can find the content code (“\f024”) from the icon detail page (http://fontawesome.io/icon/flag/). Its called Unicode there.
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 ?
Hi Juan, Can it be, you are editing the index.html in the www folder instead of the one in the src folder?
very nice tutorial… Thank you!
Great tut! Thanks!
Nice explanation! Thanks, keep posting!
Excelente