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

回答

相关问题