Question

根据这个post，有些glyphicons无法正常工作，但问题是在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-sprockets，即

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

Answer 1

我成功地包含了glyphicons。在包含的bootstrap之后添加以下font-face。

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

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

Answer 4

在你的application.scss中：

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

（务必先导入bootstrap-sprockets）

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

一些Glyphicons没有使用bootstrap-sass

4 个答案: