某些 Glyphicons 不适用于 bootstrap-sass

Question

根据这个，一些字形图标无法正常工作，但问题已在 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 文件中，我在 bootstrap 之前加载 bootstrap-链轮，即

@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: "a";
}

/* 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: "b";
}

Answer 1

尝试使用 rake assets:precompile 重新编译资产。如果你不是开发模式，不要忘记添加你的环境rake assets:precompile RAILS_ENV=production

Answer 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'

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

Answer 3

我成功添加了字形。在包含 bootstrap.

后添加以下字体

@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_

Answer 4

在你的application.scss中：

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

（一定要先导入bootstrap-链轮）

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

某些 Glyphicons 不适用于 bootstrap-sass

Some Glyphicons not working with bootstrap-sass

twitter-bootstrap

bootstrap-sass

ruby-on-rails-4