Bootstrap glyphicons 没有显示 rails app--path 问题？答案

【问题标题】：Bootstrap glyphicons not showing rails app--path issue?Bootstrap glyphicons 没有显示 rails app--path 问题？
【发布时间】：2013-06-12 04:51:19
【问题描述】：

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

图像和样式表都在同一个“资产”目录中。当我检查 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 中的简写，但是，再一次，除非这是我问题的根源，否则他们不会引用正确的路径似乎很奇怪。也就是说，我仍然不知道如何解决它。

【问题讨论】：

如果您使用资产管道，则不应在 CSS 中使用相对路径。
@newbie 如果以下答案之一满足您的问题，您应该将其标记为已接受。感谢并欢迎来到 SO。

标签： ruby-on-rails twitter-bootstrap glyphicons

【解决方案1】：

我假设您使用的是 Rails 3.1 或更高版本，因为您提到了“assets”文件夹，它是 Rails 资产管道功能的一部分。简而言之，您放入 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 文件夹中使用。有关资产管道的更多信息，请参阅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 中找到它。如果是这种情况，那么您可以将 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 或更高版本中的资产管道兼容。

【讨论】：

固体。最简单的解决方案有效，但我认为，根据其他响应者的说法，“第三种选择”是最聪明的选择。我会进一步回应他上面的评论，但感谢你给我简单的解决方案并强调我应该只使用 twitter-bootstrap-rails gem（虽然我不确定当我这样做时我会破坏什么，但会安装它，看看会发生什么）。

【解决方案2】：

TL;DR: 使用 bootstrap-sass gem 代替（下面的其余答案建议 bootstrap-rails gem，这不是一样方便，因为那样你需要其他依赖项，比如 LESS，它会变得有点复杂。

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

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

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

我仍然不确定它们的确切作用——但它们在 Rails 资产管道中发挥着重要作用。 'less' 显然是 Bootstrap 所依赖的，而不是 Rails 自带的 'sass'。

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

【讨论】：

PS：这是描述我遇到的问题并提出解决方案的 S/O 链接：stackoverflow.com/questions/13888381/…
亚历克斯，感谢您的指导。听起来你的建议是正确的方法（由下面的 tralston 加强）。我看了你引用的 railscast，但是，作为一个新手，我当然马上想知道如果我只安装 gem 会破坏什么，即使我的应用程序中有所有这些现有的引导文件。不过，我将按照说明进行操作，看看会发生什么。希望我不要把任何事情搞得太糟糕。再次感谢。
没问题！我实际上是在这里自己学习 Rails ......而且我刚刚找到了另一个攻击角度。 [见这里] (ruby.railstutorial.org/chapters/filling-in-the-layout#top)。这是一本很棒的（免费）Rails 书籍，它涵盖了足够多的其他内容，从 git 到 gems 到 bundle 到 rvm，让新手感到舒适。我真的推荐它。但我离题了 - 显然，还有另一个 Ruby gem，称为 bootstrap-sass，这正是您所需要的，以便不必担心安装 less i>（可以说是 Bootstrap 原生的 gem）。
哦，这里有一个关于 SASS 与 LESS 的很好的解释：blog.blakesimpson.co.uk/read/… -- SASS 是用 Ruby 编写的，因此可以与 Rails 开箱即用，但 LESS 是用 JavaScript 编写的，因为它需要额外的依赖项（这些依赖项非常重）。所以我用 bootstrap-sass gem 在 5 分钟内完成了所有 Bootstrap，包括 glyphicons！
谢谢亚历克斯。非常有帮助。我安装了 sass gem（默认情况下，我认为，带有一个新的 rails 项目）。但是，没有让字形图标为我工作，没有做出改变 tralston 引用了路径。

【解决方案3】：

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

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

... 并且可以选择在 boostrap.css 文件的末尾添加一个 .erb 扩展名，以便asset_path 帮助程序工作。这没有使用任何引导 gem。

来自另一个 SO 问题here 的更多信息。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

请看这个answer。这比修改 css 文件要好，因为它很难升级到新版本。因此，想法很简单，创建到此文件的路由或使用参数解释器的通用路由。其他简单的解决方案是将这些图像放在“public/img”中。

【讨论】：