Question

我正在尝试让一个Glyphicon在Rails应用程序中显示使用Bootstrap，但我无法弄清楚如何让它显示。我已经阅读了几个问题，试图通过修复路径来解决这个问题。但是，经过那些问题/答案后，我仍然被困在b / c中，不会出现glyphicon。

图像和样式表都位于相同的“资产”目录中。当我检查Chrome中的元素时，我正在使用的HTML似乎正常工作，它找到了适当的类，它链接到Bootstrap样式表。

HTML：

<p><%= link_to raw('<i class="icon-share-alt"></i>'), post %></p>

CSS（默认来自Bootstrap EXCEPT我更新/ 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上的元素并将鼠标悬停在inspect元素部分右栏中的“../ images / glyphics ...”时，Chrome引用localhost：3000 / assets /../ images / glyphicons-halflings.png as路径，这不是我的应用程序的根目录的正确路径。我怀疑这只是Chrome中的简写，但是，再一次，他们似乎不会引用正确的路径，除非这是我问题的根源。也就是说，我仍然不知道如何解决它。

Answer 1

我假设您正在使用Rails 3.1或更高版本，因为您提到的是“assets”文件夹，它是Rails的Asset Pipeline功能的一部分。简而言之，您放在rails项目基础的“app / assets”文件夹中的任何内容都将自动路由到服务器上的assets文件夹。例如：

your_app/app/assets/stylesheets/style.css＆gt;＆gt;＆gt; localhost:3000/assets/style.css
your_app/app/assets/images/button.png＆gt;＆gt;＆gt; localhost:3000/assets/button.png
your_app/app/assets/javascripts/script.js＆gt;＆gt;＆gt; localhost:3000/assets/script.js

换句话说，rails允许您在源文件夹中组织文件，但将它们全部组合在一起，以便assets文件夹中的最终用户使用。有关资产管道的更多信息，请参阅Ruby on Rails Guides: Asset Pipeline。

你的问题是你的CSS对rails一无所知，当它的代码在浏览器中被解释时，它会在assets文件夹中看到它自己。您拥有的其他图像和javascripts也是如此。最简单的解决方案是将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);

在rails应用程序的.css.scss文件中使用image-url命令将负责查找图像并输出正确的文件夹。

第三种选择是使用twitter-bootstrap-rails gem，它与Rails 3.1或更高版本中的资产管道兼容。

Answer 2

TL; DR：使用 bootstrap-sass gem（下面的其余部分建议 bootstrap-rails gem，这不是很方便，因为那时你需要其他依赖项，比如LESS，它会有点复杂。

首先，我要提一下，将Bootstrap添加到您的应用程序的方法不止一种。我首先尝试了手动方式（我怀疑你正在做的事情），并且实际上遇到了和你一样的问题（不确定是否出于同样的原因）。那么我尝试了推荐的方式，即通过名为 twitter-bootstrap-rails 的gem。我跟着这个railscast：

http://railscasts.com/episodes/328-twitter-bootstrap-basics

然后我遇到了一个问题，但没有另外一个宝石 - 'less'，这导致了一个讨厌的运行时错误。所以我在我的Gemfile中添加了两个宝石，总共三个： - 宝石'twitter-bootstrap-rails' - 宝石'therubyracer' - gem'less-rails'（缺少这是导致运行时错误的原因）。

他们的确切角色我仍然不确定 - 但他们在Rails资产管道中扮演着重要角色。显然，“少”是Bootstrap所依赖的，而不是Rails带来的“sass”。

所以，在用bundle install安装它们之后 - 那些以及它们的其他依赖项，最值得注意的是libv8 - 我的Bootstrap工作正常，包括<i class="icon-share-alt"></i> =）

Answer 3

对于那些想知道为什么图标不在生产模式下显示的人，请尝试用背景替换css属性background-image：

background: url(<%= asset_path 'glyphicons-halflings.png' %>);

...并且可以选择在boostrap.css文件的末尾添加.erb扩展名，以便asset_path帮助程序正常工作。这不使用任何引导宝石。

有关此问题的更多信息来自另一个问题here。

Answer 4

我发现这个link非常有帮助。

Answer 5

请参阅此answer。它比修改css文件更好，在那里变得难以升级到更新的版本。因此，ideia很简单，创建到这个文件的路由或带有参数解释器的通用路由。其他简单的解决方案是将这些图像放在“public / img”中。

Bootstrap glyphicons没有显示rails app - 路径问题？

5 个答案: