Rails 4 中的 bootstrap-sass 未显示正确的字形图标答案

【问题标题】：bootstrap-sass in Rails 4 not showing the proper glyphiconsRails 4 中的 bootstrap-sass 未显示正确的字形图标
【发布时间】：2016-01-07 08:18:24
【问题描述】：

我安装了bootstrap-sass Gem 并尝试使用一些字形图标，但它们只是没有以正确的方式显示。看起来浏览器正在使用实际字形图标的替代品，但它没有给我任何错误消息。

对于大多数字形图标，我只得到这个：  以铅笔为例，我得到了这个✏。看起来浏览器找不到它们，但据我所知，我的样式表正在正确加载。那么宝石中是否存在我必须修复的问题？

我的代码如下所示：

application.css.scss

/*
 *= require jquery-ui
 *= require_tree .
 *= require_self
 */

@import "bootstrap-sprockets";
@import 'bootstrap';

application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap-sprockets
//= require moment
//= require jquery_nested_form
//= require turbolinks
//= require ckeditor/init
//= require_tree .

index.html.erb

<%= link_to booking_path(booking), :class => 'btn btn-xs', :title => "#{ t('.show', :default => t('helpers.links.show')) }" do %>
    <%= glyph 'info-sign' %>
<%- end -%>

如果您需要更多信息，请告诉我。

编辑1：

我的代码创建以下 html：

<a class="btn btn-xs" title="Show" href="/houses/1">
  <span class="glyphicon glyphicon-info-sign"></span>
</a>

【问题讨论】：

由呈现的 html 是什么？
用html编辑了主帖。

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

【解决方案1】：

根据bootstrap-sass 的文档，您必须在application.css.scss 中添加remove *= require_self 和*= require_tree。

然后，删除所有 *= require_self 和 *= require_tree 。陈述来自 sass 文件。相反，使用 @import 来导入 Sass 文件。

不要在 Sass 中使用 *= require 否则你的其他样式表将不会能够访问 Bootstrap mixin 或变量。

所以你可以使用@import

application.css.scss

/*
 *= require jquery-ui
 */

@import "bootstrap-sprockets";
@import 'bootstrap';

【讨论】：

感谢您的尝试。不过没有带来任何改变。
你有字体 glypicon 吗？请这样做stackoverflow.com/questions/20255711/…。希望对你有帮助
我已经看到这个帖子并尝试过，但我不确定应该怎么做。我所有的样式表都通过资产管道加载。因此，我在 gem 目录中搜索了特定部分，但找不到 100% 合适的代码。我只能找到正在加载_glyphicons.scss 的_bootstrap.scss。在该文件中，字体路径被描述为$icon_font_path，如果我正确理解 gem 文档，那应该没问题：$icon-font-path defaults to bootstrap/ if asset path helpers are used, and ../fonts/bootstrap/ otherwise.
会不会是我的编码有问题？例如，我不能使用像 × 这样的符号！

【解决方案2】：

在指定 gem 版本的 rails-sass.gem 和 bootstrap-sass.gem 之后，它终于可以工作了。

gem 'bootstrap-sass', '~> 3.3.5.1'
gem 'sass-rails', '~> 5.0.1'

【讨论】：