当项目与咕噜内置Fontawesome不工作当项目与咕噜内置Fontawesome不工作(Fonta

我使用的字库字体真棒。 它的工作原理时，该项目未建/咕噜与变丑。

但是，当我正在创建的项目，咕噜它不工作。 我得到在控制台这个错误：... /字体/ 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-真棒/字体到dist /字体。 这需要在繁重的文件工作要做。 也许下“复制”选项

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，我发现，不涉及改变繁重的文件，如果有人有兴趣更简单的方法：

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:

如果您使用的是完整的咕噜任务堆栈的自耕农则useminPrepare任务建立从你把所有样式的组合样式表build:css评论-为你做。 （见https://github.com/yeoman/grunt-usemin额外信息）构建过程完成此文件后-有点像“vendor.234243.css”复制到文件夹的样式。 这就是为什么你的字体路径不再有效。 至少有两种可能性来解决这个问题：

1. 你可以删除字体awesom CSS出的build: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 --> 

2. 复制字体folder作为同级的styles在你的gruntfile的aditional的咕噜任务文件夹。

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

你将不得不copypasta从字体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

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

注：需要蟒

它可以让你生成的图标（你有在使用中）在项目中使用的字体 - 真棒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>

即我前缀，当我创建的图标集我给名正常字体真棒名。

字体真棒 - 聚合物 - 图标

您也可以直接导入预构建全套的字体真棒图标：

bower install font-awesome-polymer-icons

请记住，这增加了300 + KB到您的发行规模和笔者注意到，不建议用于生产。

Answer 11:

如果你正在使用SailsJS和鲍尔的工作，我已经工作了，修复Fontawesome和引导字体问题的解决方案。

1. 确保您的tasks/config/bower.js类似于： https://gist.github.com/robksawyer/fc274120aef9db278eec
2. 新增的NPM模块咕噜-删除 。
3. 创建remove.js文件tasks/config ： https://gist.github.com/robksawyer/2fcf036fdf02436aa90b
4. 更新文件tasks/register/compileAssets ： https://gist.github.com/robksawyer/fa04a34ea103bead1c61
5. 更新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'
  ]);
});

我使用的是自耕农1.4.7和它的角度发生。 这是非常重要的补充副本：应用程序，不仅副本：DIST任务（如上述建议）。 如果不包括副本：应用程序，当你进入grunt serve它行不通。 随着副本：你只考虑DIST grunt serve:dist

Answer 13:

我有非常相同的问题。 我接过来一看，一种字体真棒的bower.json文件，并发现这一点：

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

有以“主”阵列中的“字体awesome.css”无参考。 也许，像我一样，你不使用SASS或LESS造型。 因此，没有风格被添加的字体，真棒。 我修改了JSON文件，如下所示：

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

我救了就跑咕噜服务，现在我的字体真棒图标显示出来。

希望这可以帮助。

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

我用的越少，我进口的font-awesome.less加入这个我main.less文件。

@import '../../vendor/components-font-awesome/less/font-awesome.less';

然后我说这对我app.yaml文件。

handlers:
- url: /fonts
  static_dir: static/fonts

Answer 15:

喜的主要问题是，由字体真棒CSS所需的字体文件在运行繁重的任务后，你可能会得到404未找到错误，同样可以验证，如果你打开你的Chrome浏览器开发模式，并期待在不被复制consoe或网络选项卡。 为引导藏汉可能会出现同样的问题。

因此，我们需要修改繁重的任务，以便将所有的字体文件被复制。

添加单独的副本任务的字体文件。

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：注册“字体复制”。

文章来源: Fontawesome is not working when project is built with grunt