一些 Glyphicons 不适用于 bootstrap-sass答案

【问题标题】：Some Glyphicons not working with bootstrap-sass一些 Glyphicons 不适用于 bootstrap-sass
【发布时间】：2015-07-17 04:15:28
【问题描述】：

根据post 的说法，某些字形图标无法正常工作，但问题已在 bootstrap-sass 中得到解决。但我正在使用 bootstrap-sass 3.3.5，有些仍然无法正常工作。例如这些工作

<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>

这些都不起作用

<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>

在我的application.css.scss 文件中，我在引导之前加载引导链轮，即

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

我正在使用rails 4.2.2、sass-rails', '~> 4.0.4'、'sprockets-rails', '>=2.1.4'。为什么这不起作用？

这是我检查元素 chrome 网络工具时资产的相关摘录：

/* line 24, /Users/Chris/.rvm/gems/ruby-2.1.6@golf_mentor/gems/bootstrap-sass-3.3.5/assets/stylesheets/bootstrap/_glyphicons.scss */
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* line 37, /Users/Chris/.rvm/gems/ruby-2.1.6@golf_mentor/gems/bootstrap-sass-  3.3.5/assets/stylesheets/bootstrap/_glyphicons.scss */
.glyphicon-asterisk:before {
  content: "\2a";
}

/* line 38, /Users/Chris/.rvm/gems/ruby-2.1.6@golf_mentor/gems/bootstrap-sass-    3.3.5/assets/stylesheets/bootstrap/_glyphicons.scss */
.glyphicon-plus:before {
  content: "\2b";
}

【问题讨论】：

你能制作一个代码演示吗？ Codepen 会很好用。
它是一个 ruby on rails 应用程序，因此很难演示该部分代码，并且尚未部署。相关的 html 是上面的四行，其中两行给出正确的符号，两行给出一个正方形。我认为我的样式不会对此产生影响，因为它似乎与上面引用的帖子完全相同。我正在使用 bootstrap-sass gem。我已经描述了 application.css.scss 文件的相关部分。你还有什么想知道的吗？
您是否预编译了资产？
我从事开发工作，没有进行预编译。不过我确实有config.assets.debug = false。
它对我有用，我的 gemfile 显示 bootstrap-sass (3.3.4.1) 你最近做了更新，你可能有旧的预编译引导资产？

标签： twitter-bootstrap ruby-on-rails-4 bootstrap-sass

【解决方案1】：

我成功地包含了字形图标。在包含引导程序后添加以下字体。

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

@font-face{
  font-family:'Glyphicons Halflings';
  src: image-url("bootstrap/glyphicons-halflings-regular.eot");
  src: image-url("bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
       image-url("bootstrap/glyphicons-halflings-regular.woff") format("woff"),
       image-url("bootstrap/glyphicons-halflings-regular.ttf") format("truetype"),
       image-url("bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg")
}

参考： http://doruby.kbmj.com/taka/20140726/_Rails4_Bootstrap_assets_precompile_glyphicon_

【讨论】：

这会导致页面加载和图标显示之间出现延迟。我建议使用font-url 而不是image-url。

【解决方案2】：

我通过升级我能想到的一切解决了这个问题。最终起作用的配置是

gem 'sprockets-rails', '>=2.1.4'
gem 'sass-rails', '~> 5.0.1'
gem 'compass-rails', '~> 2.0.4'
gem 'bootstrap-sass', '~> 3.3.5.1'

不确定是哪个做的，但我很高兴看到那些字形。

【讨论】：

【解决方案3】：

在您的 application.scss 中：

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

（一定要先导入bootstrap-sprockets）

（通过https://github.com/twbs/bootstrap-sass/issues/653#issuecomment-47933937找到）

【讨论】：

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";

【解决方案4】：

尝试使用rake assets:precompile 重新编译资产。如果你没有处于开发模式，别忘了添加你的环境rake assets:precompile RAILS_ENV=production

【讨论】：

我现在已经从命令行尝试了rake assets:precompile。它没有解决问题。它正在开发模式下发生。
您是否也尝试过将config.assets.debug 临时设置为true ？
我已经尝试过了，但它不起作用。另外，请参见上文，我在其中添加了资产的相关摘录。
您是否尝试过其他浏览器？也许你有一些谷歌浏览器插件弄乱了缓存？
您可以尝试手动降级到bootstrap-sass 3.3.4.1 看看它是否可以解决任何问题？这可能是您正在使用的版本中引入的错误。我也使用sass-rails 5.0.3，但如果您使用不同的版本，我认为这不是问题。