在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的样式表中发生的，所以我不太确定为什么会发生这种情况。

是否有人遇到过这个问题？

- Andrew

---

不是解决方案，但如果您继续遇到问题，请查看Font Awesome图标。我在开发中和预编译的Heroku部署中都使用了它们而没有出现问题。 - Paul Fioravanti

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 列表中。然后我重新编译了我的资源，就可以看到图标了！嘭。

- Andrew

Answer 2

我通过在config/environments/production.rb中添加以下内容解决了这个问题：

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

我在Gemfile中找到下面的字符串，但没有github路径:

gem 'twitter-bootstrap-rails'

通过这个配置，在Heroku上可以很好地显示Glyphicons。

- Stepan Zakharov

---

因此，我相信最好使用Fontawesome图标(http://fontawesome.io/icons/)。它们没有这样的问题，并且已经为视网膜显示器进行了优化。 - Stepan Zakharov

这些文件在你的 app/assets 目录下还是 app/assets/fonts 目录下？ - Jordan

@Jordan 在这种情况下，我只使用 gems，并未安装任何东西到 assets。 - Stepan Zakharov

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

我认为那会起作用的。

- jakeonrails

---

这个不起作用，因为我使用的是LESS，而不是静态的bootstrap.css。问题似乎出在这里：bootstrap CSS分布在一堆LESS文件中，sprites.less是与图标相关规则的文件。其中有一个规则[class^="icon-"],[class*=" icon-"]，将background-image设置为iconSpritePath。iconSpritePath在我的bootstrap_and_overrides.css.less文件中定义为asset-path('twitter/bootstrap/glyphicons-halflings.png')。出于某种原因，在开发过程中这很好用，但在生产中，路径在编译后的CSS文件中被设置为“无”。 - Andrew