Glyphicons在部署到heroku时显示为一个框(使用amazon cloudfront托管静态文件) (Rails 4)

Question

我在Rails4中通过bootstrap gem使用字形图标，它在开发中工作得很好，但当我将它部署到heroku时，它显示为框而不是实际的图标。图片如下所示。

​

​

​

​

图标应该是箭头，但它们显示为方框。我在custom.css.scss文件中添加了以下行。

@import "bootstrap-sprockets";
@import "bootstrap";
@import 'bootstrap-datetimepicker';

下面还给出了gemfile的相关部分。

gem 'bootstrap-will_paginate', '0.0.10'
gem 'bootstrap-sass',          '3.2.0.0'
gem 'sass-rails',              '5.0.2'

我还在生产环境中设置了config.serve_static_files = true。

我正在使用亚马逊的cloudfront为我所有的静态资产提供服务。这可能会导致问题。也许我没有正确地配置cloudfront来服务于字形图标。我真的不确定为什么它不服务于字形图标。任何帮助都是最好的。谢谢。

Answer 1

如果您的代码在本地运行-这可能是CloudFont配置方式的问题。

您看到的框之所以会显示，是因为字体没有加载-所以您的浏览器不知道要显示什么。

检查CloudFont中的设置-很可能您尚未将生产环境的主机名列入白名单。