Css Heroku上的twitter引导轨道：图标显示为正方形

我已经在Heroku上部署了一个rails应用程序，我正在使用TwitterBootstrapRails gem来包含TwitterBootstrap。在本地（以及在开发环境中），一切都可以完美地工作，但在Heroku（以及在生产环境中）上，一切都可以正常工作，除了GlyphIcon，它们都显示为小正方形

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

然而，这并没有解决问题。检查页面后，图标似乎可用，但链接到它们的CSS属性被另一个CSS规则覆盖，该规则将背景图像设置为“无”。它似乎发生在作为twitter引导的一部分的样式表中，所以我不太清楚为什么会发生这种情况

---

还有其他人有这个问题吗？

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

---

我想那就行了。

解决了它。导致问题的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引导程序rails中。问题是没有预编译Fontsome图标文件，因为它们是不寻常的文件类型。我进入production.rb环境文件，在config.assets.precompile列表中添加了“.woff”、“.eot”、“.svg”、“.ttf”。然后我重新编译了我的资产，图标出现了！Boom.

我通过添加到

config/environments/production.rb

解决了这个问题：

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

我在

Gemfile

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

gem 'twitter-bootstrap-rails'

---

通过此配置，Heroku上的图标显示良好。

不是解决方案，但如果您仍然存在问题，请查看图标。我在dev和一个资产预编译的Heroku部署中使用了它们，但没有问题。这不起作用，因为我使用的更少，而不是static bootstrap.css。问题似乎是这样的：引导CSS分布在一大堆更少的文件中，而sprites.LESS是与图标相关的规则所在。在[class^=“icon-”]、[class*=“icon-”]下有一条规则，用于将背景图像设置为IConScreetPath。IConScreetPath在我的bootstrap_和_overrides.css.less文件中定义为资产路径（“twitter/bootstrap/glyphicons halflings.png”）。出于某种原因，这在开发环境中可以正常工作，但在生产环境中，路径在编译的css文件中被设置为“none”。它们没有这样的问题，并且针对视网膜显示进行了优化。它们是在您的

app/assets

目录中还是

app/assets/font

？@Jordan在这种情况下，我只使用gems，不在

assets

上安装任何东西。