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

Question

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

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

我不知道这是否是Yeoman Angular-fullstack问题，grunt问题，font-awesome问题或Heroku问题所以我把它扔出去了。也许有人可以帮助限制这一点。

注意：我正在使用“components-font-awesome”而不是“font-awesome”，因为grunt无法正确构建字体，所以建议使用垫片。< / p>

我在本地投放时看到的内容：

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

Answer 1

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

为了使用现有的grunt build工作，我将字体真棒字体文件预先复制到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'应该'。