当咕噜声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/*' ] }] }, 

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

我有同样的问题。 下面的代码解决了我的问题。

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

如果你在你的项目中使用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"; 

如果从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文件夹中。

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

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

这会将字体复制到你需要的地方。

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

最简单的方法是去你自己的bower.json并添加一个overrides属性。

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

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

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

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

没有任何答案因为某种原因而起作用。

正如上面回答的那样,对我来说也是非常好的

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

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

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

我不知道我做错了什么,但没有提出的解决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添加到您的分发大小,作者指出,不推荐将其用于生产。

如果您正在使用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

我编辑了我的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

我遇到了同样的问题。 我看了一个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" ] } 

我保存并跑了咕噜咕噜的服务,现在我的字体真棒图标显示出来。

希望这可以帮助。

对于那些使用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 

您好主要的问题是,字体真棒的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'任务,以便在编译时执行。