Including fontawesome in Angular with grunt

Question

I read a lot about this issue but still did not find the solution.

I have an Angular application set up with Yeoman's generator whitout Sass. I tried to include fontawesome, so I used bower install components-font-awesome --save.

The problem is that when I grunt buildmy app, I have an error because fonts are not found in my dist folder :

GET http://myapp.com/bower_components/components-font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3 404 (Not Found)

So I tried to add this to Grunt copy task in order to copy the fonts to the right directory:

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

But I am still getting the same error...

EDIT

Fonts seem to be available at http://myapp.com/dist/bower_components/components-font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3

But not at the URI throwing the error (without /dist) ...

Answer 1

The only way I found to include icons in my Angular's application was to include glyphicons instead of fontawesome. The same problem is happening when grunt building my app with glyphicon, but the following copy task worked 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',
                        'views/{,*/}*.html',
                        'bower_components/**/*',
                        'images/{,*/}*.{webp}',
                        'fonts/*'
                    ]
                }, {
                    expand: true,
                    cwd: '.tmp/images',
                    dest: '<%= yeoman.dist %>/images',
                    src: ['generated/*']
                }]
            },
            styles: {
                expand: true,
                cwd: '<%= yeoman.app %>/styles',
                dest: '.tmp/styles/',
                src: '{,*/}*.css'
            }
        },