Heroku上的twitter-bootstrap-rails：Glyphicons显示为正方形 [英] twitter-bootstrap-rails on Heroku: Glyphicons displayed as squares

问题描述

我已经在Heroku上部署了一个rails应用程序，我使用twitter-bootstrap-rails gem来包含twitter bootstrap。一切都在本地（和在开发环境中）工作，但在Heroku（和生产）中，除了字形，它们都显示为一个小正方形，一切正常。

I have deployed a rails app on Heroku, and I am using the twitter-bootstrap-rails gem to include twitter bootstrap. Everything works perfectly locally (and in the development environment), but on Heroku (and in production) everything works fine except for the glyphicons, which all display as little squares.

一开始我以为这是一个问题，图标sprites没有被预编译，所以在我的gemfile，我移动了线gem twitter -bootstrap-rails出资产组，我一定要预先编译所有我的资产上传之前到Heroku。

At first I thought this was a problem with the icon sprites not being precompiled, so in my gemfile, I moved the line 'gem twitter-bootstrap-rails' out of the assets group, and I was sure to precompile all my assets before uploading to Heroku.

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

However, this did not solve the problem. After inspecting the page, it seems as though the icons are available, but the CSS property that links to them is being overwritten by another CSS rule that sets background-image to none. It seems to be happening in a stylesheet that is part of twitter bootstrap, so I'm not quite sure why this is happening.

有没有人有这个问题？ / p>

Has anyone else had this problem?

推荐答案

已修复。导致问题的CSS：

Fixed it. The CSS that was causing the problem:

[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列表。然后我重新编译我的资产，图标出现了！繁荣。

was part of Fontawesome, which is included by default in twitter-bootstrap-rails. The issue was that the Fontawesome icon files were not being precompiled, because they are unusual filetypes. I went into the production.rb environment file, and added '.woff', '.eot', '.svg', '.ttf' to the config.assets.precompile list. I then re-compiled my assets, and the icons showed up! Boom.

这篇关于Heroku上的twitter-bootstrap-rails：Glyphicons显示为正方形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！