Heroku上的twitter-bootstrap-rails顯示爲正方形的glyphicons

我在Heroku上部署了一個rails應用程序，並且使用twitter-bootstrap-rails gem包含twitter引導程序。一切都在本地完美運行（並且在開發環境中），但是在Heroku（和生產環境）中，除了glyphicons之外，一切工作都很好，它們都顯示爲小方格。Heroku上的twitter-bootstrap-rails顯示爲正方形的glyphicons

起初我以爲這是一個圖標精靈未被預編譯的問題，所以在我的gemfile中，我將「gem twitter-bootstrap-rails」這一行從資產組中移出來了，我一定要預編譯所有的我的資產在上傳到Heroku之前。

但是，這並沒有解決問題。檢查頁面後，似乎圖標可用，但鏈接到它們的CSS屬性被另一個將background-image設置爲none的CSS規則覆蓋。它似乎發生在twitter引導的一部分樣式表中，所以我不太確定爲什麼會發生這種情況。

有沒有其他人有這個問題？

來源

2012-09-18 Andrew

不是一個解決方案，但如果您仍然有問題，請查看[Font Awesome]（http://fortawesome.github.com/Font-Awesome/）圖標。我已經在開發中和資產預編譯的Heroku部署中使用了它們。 –

修正了它。這是造成問題的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的引導，包括滑軌的一部分。問題是Fontawesome圖標文件沒有被預編譯，因爲它們是不尋常的文件類型。我進入了production.rb環境文件，並在config.assets.precompile列表中添加了'.woff'，' .eot'，'.svg'，' .ttf'。然後我重新編譯了我的資產，圖標出現了！繁榮。

來源

2012-10-08 07:20:29 Andrew

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

我認爲會做招。

來源

2012-09-19 19:40:03 jakeonrails

這沒有奏效，因爲我使用的是LESS，而不是靜態的bootstrap.css。問題似乎是這樣的：bootstrap CSS分佈在大量LESS文件中，而sprites.less則是與圖標相關的規則。在[class^=「icon - 」]，[class * =「icon-」]下面有一個將background-image設置爲iconSpritePath的規則。 iconSpritePath在我的bootstrap_and_overrides.css.less文件中被定義爲資產路徑（'twitter/bootstrap/glyphicons-halflings.png'）。出於某種原因，這在開發中可以正常工作，但在生產中，路徑在編譯後的css文件中被設置爲'none'。 – Andrew

寶石已經這樣做了 – bluehallu

我通過增加config/environments/production.rb解決了這個問題：

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

我也有下一個字符串中Gemfile，沒有GitHub的路徑：

gem 'twitter-bootstrap-rails'

隨着Heroku的顯示以及這種配置Glyphicons。

來源

2013-11-30 11:17:17

因此，我確信使用Fontawesome圖標（http://fontawesome.io/icons/）更好。他們沒有這樣的麻煩，並且對視網膜顯示器進行了優化。 –

這些是在你的'app/assets'目錄還是'app/assets/fonts'？ – Jordan

@Jordan在這種情況下，我只是使用寶石，不要在「assets」中安裝任何東西。 –

Heroku上的twitter-bootstrap-rails顯示爲正方形的glyphicons

回答

相關問題