Heroku上的twitter-bootstrap-rails：显示为正方形的Glyphicons

Question

我在Heroku上部署了一个rails应用程序，我正在使用twitter-bootstrap-rails gem来包含twitter bootstrap。 一切都在本地（以及在开发环境中）完美地工作，但是在Heroku（和生产中）一切都很好，除了glyphicons，它们都显示为小方块。

起初我认为这是一个问题，图标精灵没有被预编译，所以在我的gemfile中，我将“gem twitter-bootstrap-rails”行移出资产组，我确信在上传之前预先编译了我的所有资产到Heroku。

但是，这并没有解决问题。 检查页面后，似乎图标可用，但链接到它们的CSS属性被另一个将background-image设置为none的CSS规则覆盖。 它似乎发生在作为twitter bootstrap一部分的样式表中，所以我不太清楚为什么会这样。

有没有其他人有这个问题？

Answer 1

修复。 导致问题的CSS：

[class^="icon-"], [class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;

是Fontawesome的一部分，默认包含在twitter-bootstrap-rails中。 问题是Fontawesome图标文件没有被预编译，因为它们是不寻常的文件类型。 我走进production.rb环境文件，并添加“.woff”，“.eot”，“.SVG”，“的.ttf”到config.assets.precompile列表。 然后我重新编译了我的资产，图标出现了！ 繁荣。

Answer 2

我通过添加到config/environments/production.rb解决了这个问题：

config.assets.precompile += %w( '.woff', '.eot', '.svg', '.ttf' )

另外我在Gemfile有下一个字符串， 没有github路径 ：

gem 'twitter-bootstrap-rails'

使用此配置，Glyphicons在Heroku上显示良好。

Answer 3

在bootstrap.css文件中进行以下更改：

在1174行左右：

-  background-image: url("../img/glyphicons-halflings.png");
+  background-image: image-url("glyphicons-halflings.png");

在1183行附近：

-  background-image: url("../img/glyphicons-halflings-white.png");
+  background-image: image-url("glyphicons-halflings-white.png");

我认为这样就可以了。