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列表.然后我重新编译了我的资产,图标出现了!繁荣.