我想让一个Glyphicon显示在Rails应用程序中使用Bootstrap，但我不知道如何让它显示。我在这里读了几个问题，试图通过修复路径来解决这个问题。然而，经过了这些问题/答案，我仍然卡住了b/c象形符号不会显示。
图片和样式表都在同一个"Assets"目录下。我使用的HTML似乎是工作良好的b/c当我检查元素在Chrome找到适当的类，这是链接到Bootstrap样式表。
HTML:<p><%= link_to raw('<i class="icon-share-alt"></i>'), post %></p>
CSS(默认从Bootstrap除了我更新/img到/images b/c，这是我的图像目录的名称):
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../images/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
再加一个注释可能会有帮助。当我在Chrome上检查元素并将鼠标悬停在"../images/glyphics…"上时，Chrome引用localhost:3000/assets/../images/glyphicon -halflings.png作为路径，这不是我应用程序根的正确路径。我怀疑这只是在Chrome速记，但是，再一次，似乎奇怪的是，他们不会引用正确的路径，除非这是我的问题的根源。话虽如此，我还是不知道怎么修理它。
我假设你使用的是Rails 3.1或更高版本，因为你提到了"assets"文件夹，这是Rails的资产管道特性的一部分。简而言之，任何你放在"app/assets"文件夹在你的rails项目的基础将自动路由到服务器上的assets文件夹。例如:
-
your_app/app/assets/stylesheets/style.css>>>localhost:3000/assets/style.css -
your_app/app/assets/images/button.png>>>localhost:3000/assets/button.png -
your_app/app/assets/javascripts/script.js>>>localhost:3000/assets/script.js
换句话说，rails允许您在源文件夹中组织文件，但是在assets文件夹中为最终用户将它们组合在一起。有关资产管道的更多信息，请参见Ruby on Rails指南:资产管道。
你的问题是你的CSS对rails一无所知，当它的代码在浏览器中被解释时，它看到自己在assets文件夹中。对于您拥有的其他图像和javascript也是如此。最简单的解决方案是将url("../images/glyphicons-halflings.png");更改为url("/assets/glyphicons-halflings.png");。这是因为当在浏览器中查看时，CSS文件和图像都将在assets文件夹中看到对方。
第二个解决方案是使用sass-rails gem。如果你使用默认方法生成应用程序，你可能会在你的Gemfile中找到它。如果是这种情况，那么您可以将CSS文件从something.css重命名为something.css.scss(或.css.sass，但我更喜欢前者)。这将允许您使用rails对SASS的内置支持，具体如下:
background: image-url("glyphicons-halflings.png");
### Outputs: background: url(/assets/glyphicons-halflings.png);
image-url命令在你的rails应用的。css。SCSS文件将负责查找图像并输出正确的文件夹。
第三种选择是使用twitter-bootstrap-rails gem，它与Rails 3.1或更高版本的资产管道兼容。
TL;DR:使用bootstrap-sass gem代替(下面其余的答案建议bootstrap-rails gem，这不是很方便，因为这样你需要其他依赖项，比如LESS，而且它变得有点复杂。
首先，我应该提到的是，有不止一种方法来添加Bootstrap到你的应用程序。我已经尝试了手动方式首先(我怀疑你正在做什么)，并实际上遇到了同样的问题，因为你做了(不确定是否为相同的原因)。然后我尝试了推荐的方法，这是通过一个名为twitter-bootstrap-rails的gem。我跟随这条铁路:
http://railscasts.com/episodes/328-twitter-bootstrap-basics然后我遇到了一个问题，然而，没有另一个gem - 'less'，这会导致一个讨厌的运行时错误。所以我在Gemfile中又添加了两颗宝石，总共有三颗:- gem 'twitter-bootstrap-rails'- gem 'therubyracer'- gem 'less-rails'(缺少这个是导致运行时错误的原因)。
它们的确切角色我仍然不确定——但是它们在Rails资产管道中扮演着重要的角色。"less"显然是Bootstrap所依赖的，而不是Rails自带的"sass"。
所以，在安装它们与bundle install -那些，和他们的其他依赖关系，最值得注意的libv8 -我有Bootstrap工作完美，包括<i class="icon-share-alt"></i> =)
对于那些想知道为什么图标不显示在生产模式，尝试替换css属性background-image的背景，而不是:
background: url(<%= asset_path 'glyphicons-halflings.png' %>);
…并且可以选择在boostrap.css文件的末尾添加.erb扩展名，以便asset_path帮助器工作。这是在不使用任何引导宝石的情况下。
请看这个答案。这比修改css文件好，后者很难升级到新版本。所以，想法很简单，创建到这个文件的路由，或者用参数解释器创建一个通用的路由。另一个简单的解决方案是将这些图像放到"public/img"中。