据此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/