Question

我正在使用字体库字体很棒。当项目没有使用grunt构建/使用时，它可以工作。

但是当我用grunt构建项目时，它无法正常工作。我在控制台中收到此错误：... / fonts / fontawesome-webfont.woff？v = 4.0.3 404（未找到）

我和自耕农一起搭建了这个项目。

这是我在index.html中的参考

    <!-- build:css styles/fontawesome.css -->
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <!-- endbuild -->

任何想法可能出错？

更新我需要将文件夹/ bower_components / font-awesome / fonts复制到dist / fonts。这需要在grunt文件中完成。可能在“复制”选项下

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

但我不确定在哪里包含这个。

Answer 1

我遇到了同样的问题。以下代码解决了我的问题。

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

如果您在项目中使用SASS，我发现了一种更直接的方式，如果有人感兴趣，则不会涉及更改grunt文件：

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

基本上在main.scss文件的顶部包含这两行，字体应该有效。

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

Answer 3

如果您正在使用来自yeoman的完整grunt任务堆栈，则useminPrepare任务会像您一样在build:css注释中的所有样式表中构建一个组合样式表。（有关其他信息，请参阅https://github.com/yeoman/grunt-usemin）完成构建过程后，此文件（有点像“vendor.234243.css”）将复制到样式文件夹中。这就是为什么你的字体的路径不再有效。至少有两种可能性来解决这个问题：

您可以从build:css块中删除font-awesom css：

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

通过gruntfile中的aditional grunt任务将字体folder复制为styles文件夹。

Answer 4

我能够通过将以下内容添加到copy.dist.files来解决问题：

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

Answer 5

这会将字体复制到您需要的位置。

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

最简单的方法是转到您自己的bower.json并添加overrides属性。

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

您必须手动复制fontawesome/fonts文件夹app/fonts文件夹中的字体。无需修改Gruntfile或SCSS或其他任何必需的内容。

Answer 7

我的解决方案是采用CDN方法：

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

由于某些原因，没有一个答案有效。

Answer 8

如上所述，这个对我来说效果很好

 // 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

以下是解决方案：https://stackoverflow.com/a/32128931/3172813

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

Answer 10

我不知道我做错了什么，但提议的解决方案都没有对我有用。无论我尝试什么，生产（发行）版本都不会显示图标。

我最终使用了以下组件：https://github.com/philya/font-awesome-polymer-icons-generator和https://github.com/philya/font-awesome-polymer-icons

字体真棒 - 聚合物 - 图标发电机

注意：python需要

它允许您为项目中的图标（您正在使用中）生成一个字体 - 真棒SVG图标集。

举个例子，假设我想在我的项目中使用图标code, line-chart, github-alt，那么我会像这样生成它们：

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

这将生成文件build/myappname-icons.html。然后，需要将此文件导入到我的组件中，就像任何其他组件一样：

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

然后我可以得到像这样的字体真棒图标：

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

即。我在正常的字体 - 真棒名称前加上我创建图标集时给出的名称。

字体真棒 - 聚合物 - 图标

您还可以导入预先构建的全套font-awesome图标：

bower install font-awesome-polymer-icons

请注意，这会为您的分配大小增加300 + KB，并且作者指出不建议将其用于生产用途。

Answer 11

如果你正在使用SailsJS和Bower，我已经开发出一个修复Fontawesome和Bootstrap字体问题的解决方案。

确保您的tasks/config/bower.js看起来类似于：https://gist.github.com/robksawyer/fc274120aef9db278eec
添加了npm模块grunt-remove。
在remove.js：https://gist.github.com/robksawyer/2fcf036fdf02436aa90b

tasks/config

更新文件tasks/register/compileAssets：https://gist.github.com/robksawyer/fa04a34ea103bead1c61
将tasks/config/copy.js文件更新为：https://gist.github.com/robksawyer/2aac6d0cdb73bfa8239f

Answer 12

我已按如下方式编辑了我的Gruntfile.js：

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

我使用的是yeoman 1.4.7及其角度发生器。添加copy：app非常重要，而不仅仅是copy：dist task（如上所述）。如果您在输入grunt serve时没有包含copy：app，那么它将无法运行。复制：dist你只考虑grunt serve:dist

Answer 13

我遇到了同样的问题。我看了一下bower.json文件的font-awesome，发现了这个：

{
  "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"
  ]
}

没有引用＆＃34; font-awesome.css＆＃34;在＆＃34; main＆＃34;阵列。或许，像我一样，你不会使用SASS或LESS来造型。所以没有为font-awesome添加任何样式。我按如下方式修改了json文件：

{{1}}

我保存并运行了咕噜声的服务，现在我的字体很棒的图标出现了。

希望这有帮助。

Answer 14

对于那些使用Google App Engine的人，以下内容对我有用：

添加到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' 
      }
    ]
  }
}

我正在使用LESS，因此我将font-awesome.less添加到我的main.less文件中导入@import '../../vendor/components-font-awesome/less/font-awesome.less';。

app.yaml

然后我将其添加到我的handlers: - url: /fonts static_dir: static/fonts文件中。

private boolean createDir() {
        File myDir = new File(getCacheDir(), "profile_picture");
        Log.d("CreateDir", myDir.mkdir() ? "Yes" : "No");
        return myDir.mkdir();
    }

Answer 15

主要问题是，在运行grunt任务后，font-awesome css所需的字体文件不会被复制，如果打开chrome开发人员模式，可能会发现404找不到错误同样可以验证查看consoe或networks选项卡。 bootstrap也可能出现同样的问题。

因此我们需要修改grunt任务，以便复制所有字体文件。

为字体文件添加单独的复制任务。

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: { .......
  }
}

在grunt.registerTask中注册'copy：fonts'任务，以便在构建时执行。

当项目使用grunt构建时，Fontawesome无法正常工作

15 个答案:

字体真棒 - 聚合物 - 图标发电机

字体真棒 - 聚合物 - 图标