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

【问题标题】：twitter-bootstrap-rails on Heroku: Glyphicons displayed as squaresHeroku 上的 twitter-bootstrap-rails：Glyphicons 显示为正方形
【发布时间】：2012-09-10 14:43:18
【问题描述】：

我已经在 Heroku 上部署了一个 rails 应用程序，并且我正在使用 twitter-bootstrap-rails gem 来包含 twitter 引导程序。一切都在本地（和开发环境中）完美运行，但在 Heroku（和生产环境中）一切正常，除了所有显示为小方块的字形图标。

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

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

有其他人遇到过这个问题吗？

【问题讨论】：

不是解决方案，但如果您仍有问题，请查看Font Awesome 图标。我在开发和资产预编译的 Heroku 部署中使用它们没有问题。

标签： css ruby-on-rails heroku twitter-bootstrap twitter-bootstrap-rails

【解决方案1】：

在您的 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");

我认为这样可以解决问题。

【讨论】：

这不起作用，因为我使用的是 LESS，而不是静态 bootstrap.css。问题似乎是这样的：引导 CSS 分布在一大堆 LESS 文件中，而 sprites.less 是与图标相关的规则所在的地方。 [class^="icon-"],[class*=" icon-"] 下有一条规则将背景图像设置为 iconSpritePath。 iconSpritePath 在我的 bootstrap_and_overrides.css.less 文件中定义为asset-path('twitter/bootstrap/glyphicons-halflings.png')。出于某种原因，这在开发中运行良好，但在生产中，路径在编译的 css 文件中设置为“无”。

【解决方案2】：

修复它。导致问题的 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 环境文件，并在 config.assets 中添加了 '.woff'、'.eot'、'.svg'、'.ttf' .precompile 列表。然后我重新编译了我的资产，图标出现了！轰隆隆。

【讨论】：

【解决方案3】：

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

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

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

gem 'twitter-bootstrap-rails'

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

【讨论】：

所以，我相信最好使用 Fontawesome 图标 (fontawesome.io/icons)。他们没有这样的麻烦，并且针对视网膜显示器进行了优化。
这些是在您的app/assets 目录还是app/assets/fonts 中？
@Jordan 在这种情况下，我只使用 gems，不安装任何东西到assets。