twitter-bootstrap - 一些 Glyphicons 不适用于 bootstrap-sass

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

据此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文件我在 Bootstrap 之前加载 Bootstrap 链轮,即
@import "bootstrap-sprockets";
@import "bootstrap";

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

这是我检查 element chrome web 工具时 Assets 的相关摘录:
/* 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";
}

最佳答案

我成功地包含了字形图标。
在包含 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_

关于twitter-bootstrap - 一些 Glyphicons 不适用于 bootstrap-sass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31468298/

相关文章:

html - 缩放 Bootstrap 轮播

ruby-on-rails - 如何将 ActiveSupport::TimeWithZone 实例格式化为指定格式

javascript - Rails 中数据表的替代品?

javascript - css 文件不加载 application.scss

html - 什么取代了 Bootstrap 3 中的导航列表?

javascript - 为什么 Bootstrap 按钮下拉菜单在 iOS 上不起作用?

html - Bootstrap 3 模态不适用于单击按钮

ruby-on-rails - Rails 错误 : "Undefined method ` call' for "result == false":String"error in create method

javascript - "stats overview"使用 Bootstrap 等工具的功能?