65

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.

Joe
  • 4,274
  • 32
  • 95
  • 175
  • First, the relevant lines from the Gruntfile are needed to help. Second, the HTML snipped and 'yeoman' tag suggests you are using grunt-usemin which also generates some configuration, so be sure to include that if true. Finally, does Fontawesome have expectations about directory structure? If so, do you have the output configuration set to accommodate that? – Matthew Bakaitis Jan 23 '14 at 14:15

15 Answers15

87

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 %>'
        }]
    }
}
Alexis Tyler
  • 1,394
  • 6
  • 30
  • 48
Abdullah
  • 909
  • 7
  • 3
  • 12
    I just had to replace `config.dist` to `yeoman.dist` and it worked perfectly! – Bruno Peres Jan 15 '15 at 17:52
  • Yes, I had the same problem. This should be yeoman.dist instead of config.dist. I think this might have something to do with a yeoman update. – Ryan Shea Mar 18 '15 at 22:30
  • @Ryan I'm pretty sure yeoman.dist vs config.dist is just the name defined in the grunt file. That name is configurable see this thread: http://stackoverflow.com/a/21422161/736967 – Ronnie Mar 30 '15 at 19:37
  • My fontawesome installation was without a dash so it ended up as `cwd: 'bower_components/fontawesome'` – Bruno Peres Jun 01 '15 at 01:03
33

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";
vegas-dev
  • 403
  • 4
  • 8
  • Thanks, this solved my issue of the missing fonts using the [angular-fullstack](https://github.com/DaftMonk/generator-angular-fullstack) generator. – brutalhonesty Apr 03 '14 at 19:53
  • That is a great answer. how do you copy the fonts folder into the dist when you deploy the app? do you use copy task or usemin task or something else? – Urigo Apr 16 '14 at 22:50
  • @Urigo , @vegas-dev said in his answer : `more straightforward way that doesn't involve changing the grunt file`so no files have to be changed in the Gruntfile.js file. – lightalex May 01 '14 at 07:25
  • 1
    THIS should be the answer. The 'answer' above does not apply to newer yeoman distros. No changes to grunt at all – Coldstar Apr 15 '15 at 18:58
  • latest yeoman angularjs already wrote @import line, so the only line I added to make it work is $fa-font-path – windmaomao Aug 14 '15 at 14:05
16

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.

Jiri Kremser
  • 12,471
  • 7
  • 45
  • 72
michael
  • 16,221
  • 7
  • 55
  • 60
  • for some reason, option 2) putting as sibling folder did not work for me. Understand why you suggested it as it made perfect sense. However, option 1) just excluding it and adding another target within copy grunt task to move it across worked - so if referencing the minified version of font-awesome anyhow this is a great solution. Thank you ! Wasted too many hours trying clever ways to deal with this. Simplest approach was the right one afterall. – arcseldon Apr 12 '14 at 07:31
  • For me it worked the second approach, creating a grunt task which will copy the font folder as sibling to the styles one. – Joe Lewis Oct 06 '14 at 13:55
7

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' 
}
rantunes
  • 376
  • 4
  • 7
4

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'
            }]
        },
Nijomi
  • 160
  • 7
4

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.

nknj
  • 2,436
  • 5
  • 31
  • 45
  • 1
    I followed this approach too, but something is changing the paths in the CSS from "../fonts/etc" in the original app/bower_components/font-awesome/css/font-awesome.css to "/bower_components/font-awesome/fonts/etc" in the resulting dist/styles/xxx.vendor.css. Anyone know why? – John-Philip May 14 '14 at 12:23
  • 1
    I had the same problem. See my answer here: http://stackoverflow.com/questions/23587597/glyphicons-not-appearing-after-running-grunt-in-angular-generator/23587598#23587598 – nknj May 14 '14 at 18:02
1

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.

Aleksejs Spuris
  • 11
  • 1
1

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'
        }]
      }
ssaini
  • 71
  • 1
  • 6
1

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

{ 
  expand: true,
  cwd: '<%= yeoman.app %>/bower_components/font-awesome', 
  src: 'fonts/*', 
  dest: '<%= yeoman.dist %>' 
}
Community
  • 1
  • 1
Matthieu Bilbille
  • 161
  • 5
0

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.

Christof
  • 779
  • 8
  • 21
0

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
Rob Sawyer
  • 2,163
  • 1
  • 24
  • 25
0

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

camposer
  • 5,152
  • 2
  • 17
  • 15
0

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.

Scott
  • 772
  • 1
  • 11
  • 20
0

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
Karl Stulik
  • 961
  • 1
  • 12
  • 24
0

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.

Mad Physicist
  • 107,652
  • 25
  • 181
  • 264
Jayant Nayak
  • 59
  • 7