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

我認為這樣就可以了。