ruby-on-rails - Bootstrap glyphicons 没有显示 rails app--path 问题？

Question

我试图让 Glyphicon 在 Rails 应用程序中使用 Bootstrap 显示，但我不知道如何显示它。我在这里通读了几个问题，试图通过修复路径来解决这个问题。但是，在完成了这些问题/答案之后，我仍然被困在字形图标不会出现的情况下。

图像和样式表都在同一个“ Assets ”目录中。当我检查 Chrome 中的元素时，我使用的 HTML 似乎工作正常 b/c 找到了适当的类，该类链接到 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/glyphicons-halflings.png 作为路径，这不是我的应用程序根目录的正确路径。我怀疑这只是 Chrome 中的简写，但是，再一次，除非这是我问题的根源，否则他们不会引用正确的路径似乎很奇怪。也就是说，我仍然不知道如何解决它。

Answer 1

我假设您使用的是 Rails 3.1 或更高版本，因为您提到了“assets”文件夹，它是 Rails Assets 管道功能的一部分。简而言之，您放入 rails 项目基础的“app/assets”文件夹中的任何内容都将自动路由到 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 中使用。文件夹。有关 Assets 管道的更多信息，请参阅 Ruby on Rails Guides: Asset Pipeline .

你的问题是你的 CSS 对 rails 一无所知，当它的代码在浏览器中被解释时，它会在 assets 中看到自己。文件夹。您拥有的其他图像和 JavaScript 也是如此。最简单的解决方案是更改 url("../images/glyphicons-halflings.png");至url("/assets/glyphicons-halflings.png"); .这是因为 CSS 文件和图像将在 assets 中相互看到。在浏览器中查看时的文件夹。

第二种解决方案是使用 sass-rails gem。如果您使用默认方法生成应用程序，您可能会在 Gemfile 中找到它。如果是这种情况，那么您可以从 something.css 重命名您的 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 或更高版本中的 Assets 管道兼容。