font-awesome installation in ionic 3 project

Question

I am trying to install font-awesome in my ionic 3 project. I used the command :

npm install font-awesome --save

Here is the content of the package.json file

    {
       "name": "ionic-hello-world",
       "version": "0.0.0",
      "author": "Ionic Framework",
      "homepage": "http://ionicframework.com/",
      "private": true,
      "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
      },
      "config": {
        "ionic_copy": "./config/copy.config.js"
      },
      "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/camera": "^3.13.1",
        "@ionic-native/core": "3.10.2",
        "@ionic-native/network": "^4.2.1",
        "@ionic-native/splash-screen": "3.10.2",
        "@ionic-native/status-bar": "3.10.2",
        "@ionic/storage": "2.0.1",
        "angularfire2": "^4.0.0-rc0",
        "firebase": "^3.9.0",
        "font-awesome": "^4.7.0",
        "ionic-angular": "3.4.2",
        "ionicons": "3.0.0",
        "promise-polyfill": "^6.0.2",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "typings": "^2.1.1",
        "zone.js": "0.8.12"
      },
      "devDependencies": {
        "@ionic/app-scripts": "1.3.7",
        "typescript": "2.3.3"
      },
      "cordovaPlugins": [
        "cordova-plugin-whitelist",
        "cordova-plugin-console",
        "cordova-plugin-statusbar",
        "cordova-plugin-device",
        "cordova-plugin-splashscreen",
        "ionic-plugin-keyboard"
      ],
      "cordovaPlatforms": [],
      "description": "loginApp: An Ionic project"
    }

After installation, I created a directory called config in the root of the project folder. In that directory, i added the file copy.config.js copied from node_modules/ionic/app-scripts/config/copy.config.js, in which i added these two copy tasks :

    copyFontawesomeFonts: {
      src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
      dest: '{{WWW}}/assets/fonts'
    },
    copyFontawesomeCss: {
      src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'],
      dest: '{{WWW}}/assets/css'
    },

But unfortunately, the copy is not made, and all the necessary files are not copied to assets/fonts and assets/css. I copied theses files manually in the assets and fonts folders and I can use font-awesome in my project, but I would like to know why the copy tasks does not work.

Any help will be useful. Thanks.

score 6 · Answer 1 · answered Sep 05 '18 at 10:02

Install Font Awesome

It’s quite easy: npm install font-awesome --save --save-exact

Configure Ionic to include Font Awesome Making Font Awesome available in our app is not that hard… we just need to:

configure the build to copy Font Awesome fonts
configure the build to include Font Awesome sass path
make Font Awesome styles available to your project

Configure the build

Ionic building system can be easily configured.If you need to know more about it, you can find informations here

1. Configure copy task The Ionic copy task, as every other tasks, is configured using a JSON object. Each property of this JSON object is a copy sub-task. For each sub-task, there is a source src, that is an array of directories and files, and a destination dest, that is a path to where you want to copy everything.

Some placeholder can be use as {{ROOT}} for root directory and {{WWW}} for target directory.

Here is my marvellous config/copy.config.js file:

// New copy task for font files
module.exports = {
  copyFontAwesome: {
    src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  }
};

Adding a property with a different name than the default copyFonts allows to only take care about fa fonts. Ionic building system automatically adds default configuration.

2. Configure sass task Sass include paths are configure using the includePaths property of the sass configuration.

Add a config/sass.config.js with:

// Adding Font Awesome to includePaths
module.exports = {
  includePaths: [
    'node_modules/ionic-angular/themes',
    'node_modules/ionicons/dist/scss',
    'node_modules/ionic-angular/fonts',
    'node_modules/font-awesome/scss'
  ]
};

As you can see, I’m overriding the includePaths property. you need to copy default config if you want the sass task to work properly.

Enabling the custom configuration There are several ways to enable custom configuration, I choose to add it to package.json config property.

"config": { "ionic_copy": "./config/copy.config.js", "ionic_sass": "./config/sass.config.js" }

Make Font Awesome available To use Font Awesome, we need to import it. It’s now simple as two lines of code !

Add the code below at the end of your src/theme/variables.scss file.

// Font Awesome
$fa-font-path: $font-path;
@import "font-awesome";

By default, $fa-font-path equals to ../fonts. We configured fonts file to be copied to ../assets/fonts which is the ionic default font path

Use Font Awesome

Usage

<!-- basic usage -->
<fa-icon name="camera-retro"></fa-icon>
<!-- basic usage with color -->
<fa-icon name="camera-retro" color="danger"></fa-icon>
<!-- larger icons -->
<fa-icon name="camera-retro" size="4x"></fa-icon>
<!-- fixed width icons -->
<fa-icon name="camera-retro" fixed-width></fa-icon>
<!-- dynamic value -->
<fa-icon [name]="icon"></fa-icon>
<!-- buttons -->
<button ion-button icon-left>
  <fa-icon name="group"></fa-icon>
  people
</button>

More learn about , please read this link here

Abhay Singh · Answer 2 · 2018-09-05T09:37:35.943

I also face the same problem but solve the problem by these steps below

Run the following command => npm install --save font-awesome
Open your index.html file under src folder and paste fontawesome.min.css

<link href="assets/css/font-awesome.min.css" rel="stylesheet"/>
Create a new folder name scripts on your app root where is all root file located
Create a new js file having name custom-libs.js inside scripts folder

Then paste below code into that file

const existingConfig = require('../node_modules/@ionic/app-scripts/config/copy.config');
module.exports = Object.assign(existingConfig, {
  copyFontawesomeFonts: {
    src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
 },
 copyFontawesomeCss: {
   src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'],
   dest: '{{WWW}}/assets/css'
 }});

Last but not the least step now we need to tell ionic we are using custom copy js so, open package.json file and replace below code

"config": { "ionic_copy": "./scripts/custom-libs.js" }

Now we are good to go run ionic serve command and see your changes

It's really helpful for me. It has solved my problem as I was stuck from 2 days — dilipkumar1007, Sep 05 '18 at 09:35

score 0 · Answer 3 · answered Dec 04 '17 at 00:48

You need to copy the files to the build folder then call them from the index.html:

copyFontawesomeFonts: {
  src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
  dest: '{{BUILD}}/assets/fonts'
},
copyFontawesomeCss: {
  src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'],
  dest: '{{BUILD}}/assets/css'
},

In index.html add the following line:

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

Suraj Rao · Answer 4 · 2018-07-04T11:58:35.283

In that directory, i added the file copy.config.js copied from node_modules/ionic/app-scripts/config/copy.config.js, in which i added these two copy tasks

The cleaner way is to make your own file and append your custom tasks to the original configuration. That way you don't have to worry much when you update the app scripts.

let originalConfig = require('@ionic/app-scripts/config/copy.config');

module.exports = Object.assign({}, originalConfig, {
  copyFontawesomeFonts: {
    src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  },
  copyFontawesomeCss: {
    src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'],
    dest: '{{WWW}}/assets/css'
  },
});

Also, you need to specify your custom config file in package.json. This is missing in your steps.

"config": {
    "ionic_copy": "./config/custom.copy.js"
},

Update

If you are using font-awesome v5.x, you can use angular-fontawesome package and import the FontAwesomeModule directly in your project.

npm i @fortawesome/fontawesome-svg-core --save
npm i @fortawesome/free-solid-svg-icons --save //or any other category
npm i @fortawesome/angular-fontawesome --save

Documentation here

score 0 · Answer 5 · answered Aug 02 '18 at 11:03

This is how I solved the problem:

1 : Run npm install font-awesome --save (Installs font awesome locally)

2 : Open globals.scss of your project i.e. src/global.scss. And paste the following lines :

$fa-font-path : "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";

3 : Your global.scss file should look something like this after that:

// http://ionicframework.com/docs/theming/"

$fa-font-path : "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";

@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import "~@ionic/angular/css/colors.css";

@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

Try displaying font awesome icon with this <i primary class="fa fa-cart-plus fa-lg"></i>

score -1 · Answer 6 · answered Dec 04 '17 at 05:30

I installed font awesome in a different way.

Step 1) Add to node_modules/@ionic/app-scripts/config/sass.config.js

  includePaths: [
    'node_modules/ionic-angular/themes',
    'node_modules/ionicons/dist/scss',
    'node_modules/ionic-angular/fonts',
    'node_modules/font-awesome/scss'
  ],

Step 2) Add to variables.scss

@import "font-awesome";

Step 3) Copy the required font awesome fonts to build area.

package.json

"config": {
    "ionic_copy": "./copy-from.js"
},

copy-from.js

var fs = require('fs-extra')

// we will add config later here, right now the translation files are not being copied even though
// they are in assets.
var dependencies = [
  ['node_modules/font-awesome/fonts/', 'www/fonts']
];

console.log('Executing application custom copies...', dependencies);
dependencies.forEach(function (value) {
  fs.copy(value[0], value[1], function (err) {
    if (err) return console.error(err)
    console.log("success!")
  });

});

At this point there is probably a better way to do step 3.

font-awesome installation in ionic 3 project

6 Answers6

Linked