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.

Answer 1

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:

1. configure the build to copy Font Awesome fonts
2. configure the build to include Font Awesome sass path
3. 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.

3. 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

Answer 2

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

1. Run the following command => npm install --save font-awesome

2. Open your index.html file under src folder and paste fontawesome.min.css

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

3. Create a new folder name scripts on your app root where is all root file located
4. Create a new js file having name custom-libs.js inside scripts folder

5. 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'
    }});
   

6. 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