Fontawesome is not working when project is built w

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 working. I get this error in console: .../fonts/fontawesome-webfont.woff?v=4.0.3 404 (Not Found)

I've scaffolded the project with yeoman.

This is my ref in index.html

    <!-- build:css styles/fontawesome.css -->
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <!-- endbuild -->

Any ideas what can be wrong?

Update I need to copy the folder /bower_components/font-awesome/fonts to dist/fonts. This needs to be done in the grunt-file. Probably under the "copy" options

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

But I'm not really sure where to include this.

Answer 1

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 2

I was having the very same problem. I took a look a the bower.json file for font-awesome and found this:

{
  "name": "font-awesome",
  "description": "Font Awesome",
  "keywords": [],
  "homepage": "http://fontawesome.io",
  "dependencies": {},
  "devDependencies": {},
  "license": ["OFL-1.1", "MIT", "CC-BY-3.0"],
  "main": [
    "less/font-awesome.less",
    "scss/font-awesome.scss"
  ],
  "ignore": [
    "*/.*",
    "*.json",
    "src",
    "*.yml",
    "Gemfile",
    "Gemfile.lock",
    "*.md"
  ]
}

There was no reference to the "font-awesome.css" in the "main" array. Perhaps, like me, you're not using SASS or LESS for styling. So no styles are being added for font-awesome. I modified the json file as follows:

{
  "name": "font-awesome",
  "description": "Font Awesome",
  "keywords": [],
  "homepage": "http://fontawesome.io",
  "dependencies": {},
  "devDependencies": {},
  "license": ["OFL-1.1", "MIT", "CC-BY-3.0"],
  "main": [
    "less/font-awesome.less",
    "scss/font-awesome.scss",
    "css/font-awesome.css",
    "fonts/fontawesome-webfont.tff",
    "fonts/fontawesome-webfont.woff",
    "fonts/fontawesome-webfont.woff2"
  ],
  "ignore": [
    "*/.*",
    "*.json",
    "src",
    "*.yml",
    "Gemfile",
    "Gemfile.lock",
    "*.md"
  ]
}

I saved and ran grunt serve, and now my font-awesome icons show up.

Hope this helps.

Answer 3

I had the same problem. The following code solved my problem.

copy: {
    dist: {
        files: [{
            expand: true,
            dot: true,
            cwd: '<%= config.app %>',
            dest: '<%= config.dist %>',
            src: [
                '*.{ico,png,txt}',
                '.htaccess',
                'images/{,*/}*.webp',
                '{,*/}*.html',
                'styles/fonts/{,*/}*.*'
            ]
        },{
            expand: true,
            dot: true,
            cwd: 'bower_components/bootstrap/dist', // change this for font-awesome
            src: ['fonts/*.*'],
            dest: '<%= config.dist %>'
        }]
    }
}