Fontawesome is not working when project is built with grunt

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.

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 %>'
        }]
    }
}

If you're using SASS in your project, I found a more straightforward way that doesn't involve changing the grunt file if anyone is interested:

http://likesalmon.net/use-font-awesome-on-yeoman-angularjs-projects/

Basically include these 2 lines at the top of your main.scss file and the fonts should work.

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

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.

I was able to fix the problem by adding the following to copy.dist.files:

{
   expand: true,
   flatten: true,
   src: 'bower_components/components-font-awesome/fonts/*',
   dest: 'dist/fonts' 
}

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'
            }]
        },

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.

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.

As answered above this one worked very well for me too

 // Copies remaining files to places other tasks can use
    copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>',
          dest: '<%= yeoman.dist %>',
          src: [
            '*.{ico,png,txt}',
            '.htaccess',
            '*.html',
            'scripts/components/{,*/}*.html',
            'images/{,*/}*.{webp,png,jpg,jpeg,gif}',
            'fonts/*',
            'styles/fonts/{,*/}*.*',
            'services/{,*/}*.json',
            'services/mocks/{,*/}*.json'
          ]
        }, {
          expand: true,
          cwd: '.tmp/images',
          dest: '<%= yeoman.dist %>/images',
          src: ['generated/*']
        }, {
          expand: true,
          cwd: '.tmp/concat/scripts',
          dest: '<%= yeoman.dist %>/scripts',
          src: '{,*/}*.js'
        }, {
          expand: true,
          cwd: '.tmp/concat/styles',
          dest: '<%= yeoman.dist %>/styles',
          src: '{,*/}*.css'
        }, {
          expand: true,
          cwd: '<%= yeoman.app %>',
          src: 'styles/Bootstrap/fonts/bootstrap/*',
          dest: '<%= yeoman.dist %>'
        }, {
          expand: true,
          cwd: 'bower_components/font-awesome/fonts/',
          src: ['*.*'],
          dest: '<%= yeoman.dist %>/fonts'
        }]
      }

Here is the solution: https://stackoverflow.com/a/32128931/3172813

{ 
  expand: true,
  cwd: '<%= yeoman.app %>/bower_components/font-awesome', 
  src: 'fonts/*', 
  dest: '<%= yeoman.dist %>' 
}

I don't know what I was doing wrong but none of the proposed solutions worked for me. Whatever I tried, the production (distribution) release would not display the icons.

I ended up using the following components: https://github.com/philya/font-awesome-polymer-icons-generator and https://github.com/philya/font-awesome-polymer-icons

font-awesome-polymer-icons-generator

Note: python needed

It allows you to generate a font-awesome SVG icon set for the icons (you have in use) in your project.

As an example, say I want the icons code, line-chart, github-alt in my projects, then I'd generate them like so:

./makefaicons.py myappname code line-chart github-alt

This generates the file build/myappname-icons.html. This file then needs to be imported into my component just like any other component:

<link rel="import" href="<pathToFile>/myappname-icons.html">

then I can get the font-awesome icons like so:

<core-icon icon="myappname:line-chart"></core-icon>

i.e. I prefix the normal font-awesome name with the name I gave when I created the icon set.

font-awesome-polymer-icons

You can also just import the pre-built full set of font-awesome icons:

bower install font-awesome-polymer-icons

Keep in mind that this adds 300+KB to your distribution size and the author notes that it is not recommended for production use.

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

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

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.

For those using Google App Engine, the following worked for me:

Add to Gruntfile.js:

copy: {
  build_font_awesome: {
    files: [
      {
         expand: true,
         flatten: true,
         src: 'vendor/components-font-awesome/fonts/*',
         dest: '<%= build_dir %>/fonts' 
      }
    ]
  },
  compile_font_awesome: {
    files: [
      {
         expand: true,
         flatten: true,
         src: 'vendor/components-font-awesome/fonts/*',
         dest: '<%= compile_dir %>/fonts' 
      }
    ]
  }
}

I am using LESS so I imported font-awesome.less by adding this to my main.less file.

@import '../../vendor/components-font-awesome/less/font-awesome.less';

Then I added this to my app.yaml file.

handlers:
- url: /fonts
  static_dir: static/fonts

Hi the main issue is that the font files required by font-awesome css don't get copied after you run the grunt task and you may get 404 not found error the same can be verified if you open your chrome developer mode and look in the consoe or networks tab. The same issue may occur for bootstrap aswell.

Hence we need to modify the grunt task so that the all the font files get copied.

Add seperate copy task for font files .

copy: {
  dist: { .....

  },
   fonts: {
	expand: true,
	flatten: true,
	cwd: '.',
	src: ['bower_components/bootstrap/fonts/*', 'bower_components/font-awesome/fonts/*'],
	dest: '<%= yeoman.dist %>/fonts',
	filter: 'isFile'
  },
  styles: { .......
  }
} 

Register the 'copy:fonts' task in grunt.registerTask so that it gets executed at the build time.