包括在Angular中的fontawesome和grunt

时间:2014-04-30 12:52:06

标签: angularjs gruntjs font-awesome

我读了很多关于这个问题,但仍未找到解决方案。

我有一个Angoman应用程序设置了Yeoman的生成器whitout Sass。我试图包括fontawesome,所以我使用了bower install components-font-awesome --save

问题是,当我grunt build我的应用时,我有一个错误,因为在我的dist文件夹中找不到字体:

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

所以我尝试将此添加到Grunt复制任务中,以便将字体复制到正确的目录中:

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

但我仍然得到同样的错误......

编辑

字体似乎可在http://myapp.com / dist / bower_components/components-font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3

获取

但不是在抛出错误的URI(没有/ dist)......

1 个答案:

答案 0 :(得分:1)

我发现在Angular的应用程序中包含图标的唯一方法是包括glyphicons而不是fontawesome。当grunt使用glyphicon构建我的应用程序时会发生同样的问题,但以下复制任务对我有用:

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