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 list。然后我重新编译了我的资产，图标出现了！吊杆。

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");

我认为这样就可以了。

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

3 个答案: