Fontawesome doesn't work when a project is built with grunts

Question

I am using a font font library. It works when the project is not built / not cleaned with grunts.

But when I build a project with a grunt, it doesn't work. I get this error in the console: ... / fonts / fontawesome-webfont.woff? V = 4.0.3 404 (not found)

I started a project with a yeomen.

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 could be wrong?

Update I need to copy the / bower _components / font-awesome / fonts folder to dist / fonts. This must be done in the grunt file. Perhaps under the options "copy"

 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 sure where to turn it on.

Answer 1

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

Answer 2

If you use SASS in your project, I found an easier way that is not related to modifying the grunt file, if anyone is interested:

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

Basically, these two lines are at the top of the main.scss file, and the fonts should work.

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

Answer 3

If you use the full stack of the grunt task from yoman, then the useminPrepare task creates a combined stylesheet from all the stylesheets that you put in the build:css comment, just like you do. (see https://github.com/yeoman/grunt-usemin for more information). After the build process is complete, this file, somewhat similar to "vendor.234243.css", is copied to the styles folder. This is why the path to your font is no longer valid. There are at least 2 ways to solve this problem:

• You can remove the awesom css font from 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 --> 

• Copy the folder fonts as a child to the styles folder using the optional grunt function in the grunt file.

Answer 4

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

Answer 5

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 6

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

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

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

Answer 7

My solution was to use the 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.

Answer 8

As stated above, this also worked very well for me.

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

Answer 9

Here is the solution: stack overflow

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

Answer 10

I do not know what I was doing wrong, but none of the proposed solutions worked for me. No matter what I tried, the release (distribution) did 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 required

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

As an example, let's say I need the code, line-chart, github-alt icons in my projects, then I would generate them like this:

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

This creates the build/myappname-icons.html . Then this file must be imported into my component, like any other component:

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

then I can get font-awesome icons like this:

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

i.e. I prefix the regular font name with the name that I gave when I created the icon set.

awesome fonts-polymer-icon

You can also just import a ready-made full set of awesome icon fonts:

 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 use in production.

Answer 11

If you work with SailsJS and Bower, I have developed a solution that fixes Fontawesome and Bootstrap font problems.

• Make sure your tasks/config/bower.js is like: https://gist.github.com/robksawyer/fc274120aef9db278eec
• Added npm grunt-remove module.
• Create remove.js file in tasks/config : https://gist.github.com/robksawyer/2fcf036fdf02436aa90b
• Update tasks/register/compileAssets : https://gist.github.com/robksawyer/fa04a34ea103bead1c61
• Update tasks/config/copy.js to: https://gist.github.com/robksawyer/2aac6d0cdb73bfa8239f

Answer 12

I edited my Gruntfile.js file 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 am using yoman 1.4.7 and its angular generator. It is very important to add a copy: the application and not only copy the dist task (as indicated above). If you do not enable the copy: application when grunt serve logs in, it will not work. With a copy: dist, you only consider grunt serve:dist

Answer 13

I had the same problem. I looked at 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 font-awesome.css in the "main" array. Perhaps, like me, you are not using SASS or LESS for styling. Therefore, no style is added for fonts. 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 started serving grunt, and now my font extension icons appear.

Hope this helps.

Answer 14

For those using the 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 use 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 

Answer 15

Hi, the main problem is that the font files required by the font-awesome css are not copied after running the grunt task, and you may get 404 not found error. You can check the same if you open your Chrome development mode and look at the consoe or network tab. The same problem can occur for bootstrap.

Therefore, we need to modify the grunt task to copy all font files.

Add a separate 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 runs during build.