当咕噜声build立项目时，Fontawesome不工作

我正在使用字体库字体真棒。 当项目不是用grunt构build/丑化的时候，它工作。

但是当我用grunt来构build这个项目的时候，这是行不通的。 我在控制台中得到这个错误：… / fonts / fontawesome-webfont.woff？v = 4.0.3 404（Not Found）

我已经与yeoman搭起了这个项目。

这是我在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中的所有样式表构build一个组合的样式表build:css注释 – 就像您一样。 （请参阅https://github.com/yeoman/grunt-usemin获取更多信息）构build过程完成后，此文件（与“vendor.234243.css”相似）被复制到styles文件夹。 这就是为什么你的字体path不再有效。 至less有两种可能性来解决这个问题：

1. 你可以从build:css删除font-awesom css 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 --> 

2. 将字体folder作为兄弟文件通过grunt文件中的一个随意的grunt任务复制到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": "xxx", "dependencies": { ..., "fontawesome": "~4.0.3" }, "devDependencies": { ..., }, "overrides": { "fontawesome": { "main": [ "./css/font-awesome.css" ] } } } 

您将不得不手动复制fontawesome/fonts文件夹中的字体到您的app/fonts文件夹中。 没有编辑Gruntfile或SCSS或其他所需的东西。

Answer 7

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

 <link href="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

这里是解决scheme： https : //stackoverflow.com/a/32128931/3172813

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

Answer 10

我不知道我做错了什么，但没有提出的解决scheme为我工作。 无论我尝试什么，生产（分发）版本都不会显示图标。

我结束了使用以下组件： 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> 

即我用我创build图标集时给出的名称加正常字体名称的前缀。

字体真棒 – 聚合物 – 图标

您也可以导入预先build立的完整的字体真棒图标集：

 bower install font-awesome-polymer-icons 

请记住，这会将300 + KB添加到您的分发大小，作者指出，不推荐将其用于生产。

Answer 11

如果您正在使用SailsJS和Bower，我已经制定了解决Fontawesome和Bootstrap字体问题的解决scheme。

1. 确保你的tasks/config/bower.js类似于： https : tasks/config/bower.js
2. 添加了npm模块grunt-remove 。
3. 在tasks/config创buildremove.js文件： https ： remove.js
4. 更新文件tasks/register/compileAssets ： https ： tasks/register/compileAssets
5. 更新tasks/config/copy.js文件到： https : tasks/config/copy.js

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和它的angular发生器。 添加副本：应用程序非常重要，而不仅仅是复制：dist任务（如上所示）。 如果你不包括复制：应用程序，当你inputgrunt 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" ] } 

在“main”数组中没有提到“font-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' } ] } } 

我正在使用LESS，所以我通过将这个添加到我的main.less文件中来导入了font-awesome.less 。

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

然后我将其添加到我的app.yaml文件。

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

Answer 15

您好主要的问题是，字体真棒的CSS所需的字体文件不会被复制后，你运行的Grunt任务，你可能会得到404未发现的错误相同的可以validation，如果你打开你的铬开发人员模式，看在consoe或networking选项卡。 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'任务，以便在编译时执行。