3

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

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

4

5 回答 5

6

我假设您使用的是 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 指南：资产管道。

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

第二种解决方案是使用 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 或更高版本中的资产管道兼容。

于 2013-06-15T22:30:54.770 回答
1

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，总共三个：- gem 'twitter-bootstrap-rails' - gem 'therubyracer' - gem 'less-rails' （缺少这是运行时错误的原因）。

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

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

于 2013-06-15T20:50:55.070 回答
1

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

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

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

更多关于这个从另一个 SO question here。

于 2013-09-09T19:57:11.930 回答
0

我发现这个链接非常有帮助。

于 2014-05-13T19:13:42.680 回答
0

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

于 2014-09-21T23:05:32.480 回答