Adding Font-Awesome to rc0

Ionic Framework ionic-v3
1

Hey guys,

Here’s what I’ve done to add font-awesome to my project. Is this the right way of doing it?

Step One: npm install font-awesome fs-extra --save

Step Two: Create config folder on project root and paste this file: copy.config.js. You can also find it in your /node_modules/@ionic/app-scripts/config/copy.config.js

Step Three: Add these lines in copy.config.js

{
src: ‘node_modules/font-awesome/css/font-awesome.min.css’,
dest: ‘www/libs/fa/font-awesome.min.css’
},
{
src: ‘node_modules/font-awesome/fonts’,
dest: ‘www/libs/fonts’
},

Step Four: Edit Package.json, add these lines

“config”: {
“ionic_copy”: “./config/copy.config.js”
},

Step Five: Add this line in src/index.html
<link href="libs/fa/font-awesome.min.css" rel="stylesheet"/>

You can find more info on custom-config in here:
Custom Config Files

1 Like
2

+1
@DeeM52 let me know if this is working fine for you. I’m also interested in adding FA to my app

3

You don’t need this steps.
If you use the correct file name (and variable name in some cases) , it will override the default script

In case you want to use font-awesome with ion-icon, you can add something like this in your global.scss.

  /* Extends material-icons to ion-icon elements */
  ion-icon[material-icons]:before{
    @extend .material-icons;
    content: attr(name);
  }

More details here

Note there is a bug in copy global.sass to main.css, so you need to add an sass.config.js with this:

module.exports = {
  /**
   * variableSassFiles: Lists out the files which include
   * only sass variables. These variables are the first sass files
   * to be imported so their values override default variables.
   */
  variableSassFiles: [
    '{{SRC}}/theme/variables.scss',
    '{{SRC}}/theme/global.scss' // workadound problem #8307
  ]
};
1 Like
4

@ecureuill Thanks for the info. I’ll test it tomorrow =)
@gigocabrera It’s working as it is. I’m trying to see if there is a better way.

5

I’ve taken out the the modification in the scripts. And thank you for the info on integrating font-awesome to ion-icons.

Original post (personal archive)

1 Like
6

@DeeM52 I followed your steps but it doens’t work for me. Both fontawesome and ionicons are pointing to the same assets/fonts destination and one is deleting the other one, depending on which one is first in my custom script below.

Is there a way to tell fs-extra (the copy script) to NOT empty a directory before copying?

module.exports = {
  include: [
    {
      src: 'src/assets/',
      dest: 'www/assets/'
    },
    {
      src: 'src/index.html',
      dest: 'www/index.html'
    },
    {
      src: 'src/service-worker.js',
      dest: 'www/service-worker.js'
    },
    {
      src: 'node_modules/ionic-angular/polyfills/polyfills.js',
      dest: 'www/build/polyfills.js'
    },
    {
      src: 'node_modules/ionicons/dist/fonts/',
      dest: 'www/assets/fonts/'
    },
    {
      src: 'node_modules/font-awesome/fonts/',
      dest: 'www/assets/fonts/'
    },
    {
      src: 'node_modules/font-awesome/css/font-awesome.min.css',
      dest: 'www/assets/css/font-awesome.min.css'
    }
  ]
};
7

IT WORKS NOW… :wink:

I moved fontawesome under the assets/fa folder and that did it. Here’s the working version of my custom script:

module.exports = {
  include: [
    {
      src: 'src/assets/',
      dest: 'www/assets/'
    },
    {
      src: 'src/index.html',
      dest: 'www/index.html'
    },
    {
      src: 'src/service-worker.js',
      dest: 'www/service-worker.js'
    },
    {
      src: 'node_modules/ionic-angular/polyfills/polyfills.js',
      dest: 'www/build/polyfills.js'
    },
    {
      src: 'node_modules/ionicons/dist/fonts/',
      dest: 'www/assets/fonts/'
    },
    {
      src: 'node_modules/font-awesome/fonts/',
      dest: 'www/assets/fa/fonts'
    },
    {
      src: 'node_modules/font-awesome/css/font-awesome.min.css',
      dest: 'www/assets/fa/css/font-awesome.min.css'
    }
  ]
};
8

There is still a lot of confusion on what is a best practice when it comes to adding FontAwesome to an ionic2 app, so I wrote an article about it to mitigate some of that confusion. I hope this helps anybody else looking for a correct answer

1 Like