字体太棒了不能使用自动生成器推送到Heroku

Question

我正在使用Yeoman发电机“angular-fullstack”。 使用新生成的“angular-fullstack”脚手架，我执行bower install --save components-font-awesome然后在main.html模板中添加一个字体 - 真棒图标，构建并将其推送到heroku，我看到一个灰色框，图标应该是。

但是，如果我在本地执行grunt serve ，我可以看到我期望的图标。

我不知道这是一个Yeoman Angular-fullstack问题，grunt问题，字体真棒问题还是Heroku问题所以我把它扔出去了。 也许有人可以帮助限制这一点。

注意 ：我使用“components-font-awesome”而不是“font-awesome”，因为grunt不能正确构建字体，所以建议使用垫片。

我在本地服务时看到的内容：

我在构建并推送到heroku时看到的内容：

Answer 1

在这个版本的Yeoman angular-fullstack生成器中， grunt build命令在dist目录下构建交付的文件。 另一个stackoverflow答案（在上面的评论中引用）暗示将字体 - 真棒fonts目录直接放在dist级别下。 但是，提供的文件在dist/public 。 因此，它位于当前存在fonts目录的public目录下，并且应该放置字体真棒字体文件。

为了使用现有的grunt build ，我将font-awesome字体文件预先复制到app/fonts目录中。 这样， grunt build自动将文件复制到dist/public/fonts目录中。

Answer 2

为了补充已接受的答案，以下是要走的路：

以下内容添加到Gruntfile.js在copy.dist.files部分：

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

我根据其他评论的建议创建了一个独特的答案。

Answer 3

克里斯托夫的版本对我不起作用。

这对我有用：

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

Answer 4

使用font-awesome.css的解决方案

这对我有用：

如果通过bower安装font-awesome，请打开“bower_components / font-awesome / bower.json”并找到以下代码块：

"main": [
    "less/font-awesome.less",
    "scss/font-awesome.scss"
],

将CSS添加到此“主”节点数组：

"main": [
    "less/font-awesome.less",
    "scss/font-awesome.scss",
    "css/font-awesome.css"
],

启动你的服务器，或者如果它已经运行则停止/启动，并且现在应该注入font-awesome css'should'。