Fontawesome is not working when project is built with grunt

Question

I\'m using the font library font awesome. It works when the project is not built/uglified with grunt.

But when I\'m building the project with grunt it\'s not workin

Answer 1

If you're working with SailsJS and Bower, I've worked up a solution that fixes Fontawesome and Bootstrap font issues.

1. Ensure your tasks/config/bower.js looks similar to: https://gist.github.com/robksawyer/fc274120aef9db278eec
2. Added the npm module grunt-remove.
3. Create remove.js file in tasks/config: https://gist.github.com/robksawyer/2fcf036fdf02436aa90b
4. Update file tasks/register/compileAssets: https://gist.github.com/robksawyer/fa04a34ea103bead1c61
5. Update the tasks/config/copy.js file to: https://gist.github.com/robksawyer/2aac6d0cdb73bfa8239f

Answer 2

this will copy the fonts to where you need them.

copy: {
        dist: {
            files: [{
                expand: true,
                dot: true,
                cwd: '<%= yeoman.app %>',
                dest: '<%= yeoman.dist %>',
                src: [
                    '*.{ico,png,txt}',
                    '.htaccess',
                    'images/{,*/}*.webp',
                    '{,*/}*.html',
                    'styles/fonts/{,*/}*.*'
                ]
            }, {
                expand: true,
                dot: true,
                cwd: 'app/bower_components/fontawesome/fonts/',
                src: ['*.*'],
                dest: '<%= yeoman.dist %>/fonts'
            }]
        },

Answer 3

The simplest way to do this is to go to your own bower.json and add an overrides property.

{
  "name": "xxx",
  "version": "x.x.x",
  "dependencies": {
    ...,
    "fontawesome": "~4.0.3"
  },
  "devDependencies": {
    ...,
  },
  "overrides": {
    "fontawesome": {
      "main": [
        "./css/font-awesome.css"
      ]
    }
  }
}

You will have to copypasta the fonts from the fontawesome/fonts folder your your app/fonts folder manually. No editing of Gruntfile or SCSS or anything else required.

Answer 4

I've edited my Gruntfile.js as follows:

//...
copy: {
  dist: {
    files: [//... {
      expand: true,
      dot: true,
      cwd: 'bower_components/font-awesome/fonts/',
      src: ['*.*'],
      dest: '<%= yeoman.dist %>/fonts'
    }]
  },
  app: {
    files: [{
      expand: true,
      dot: true,
      cwd: 'bower_components/font-awesome/fonts/',
      src: ['*.*'],
      dest: '<%= yeoman.app %>/fonts'
    }]
  }, //...
}
//...
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
  if (target === 'dist') {
    return grunt.task.run(['build', 'connect:dist:keepalive']);
  }

  grunt.task.run([
    'clean:server',
    'wiredep',
    'copy:app', // Added this line
    'concurrent:server',
    'autoprefixer:server',
    'connect:livereload',
    'watch'
  ]);
});

I'm using yeoman 1.4.7 and its angular generator. It's very important to add copy:app and not only copy:dist task (as suggested above). If you don't include copy:app when you enter grunt serve it's not going to work. With copy:dist you're only considering grunt serve:dist

Answer 5

If you are using the complete grunt task stack from yeoman then the useminPrepare task builds a combined stylesheet from all stylesheets that you put in the build:css comment - as you do. (see https://github.com/yeoman/grunt-usemin for additional informations) After the build process is done this file - somewhat like "vendor.234243.css" is copied to the styles folder. That's why the path for your font is no longer valid. There are at least 2 possibilities to solve this:

1. You could remove the font-awesom css out of the build:css block:

   <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
   <!-- build:css styles/fontawesome.css -->
    this will be processed by useminPrepare 
   <!-- endbuild -->
   

2. Copy the fonts folder as a sibling to the styles folder by an aditional grunt task in your gruntfile.

Answer 6

My solution was to go with a CDN approach:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

None of the answers worked for some reason.