我已经在 Heroku 上部署了一个 Rails 应用程序，我正在使用 twitter-bootstrap-rails gem 来包含 twitter bootstrap。一切都在本地(和在开发环境中)完美运行，但在 Heroku(和生产环境中)一切正常，除了字形，它们都显示为小方 block 。
起初我认为这是图标 Sprite 没有被预编译的问题，所以在我的 gemfile 中，我将行 'gem twitter-bootstrap-rails' 从 Assets 组中移出，我确信预编译了我所有的上传到 Heroku 之前的 Assets 。
但是，这并没有解决问题。检查页面后，图标似乎可用，但链接到它们的 CSS 属性正在被另一个将 background-image 设置为 none 的 CSS 规则覆盖。它似乎发生在作为 Twitter Bootstrap 一部分的样式表中，所以我不太确定为什么会发生这种情况。
有没有人遇到过这个问题？
最佳答案
修复它。导致问题的 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 .预编译列表。然后我重新编译我的 Assets ，图标出现了!繁荣。
关于css - Heroku 上的 twitter-bootstrap-rails : Glyphicons displayed as squares，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12475253/