Reputation: 16373
According to this post there as a problem with some glyphicons not working but the problem was fixed in bootstrap-sass. But I am using bootstrap-sass 3.3.5 and some are still not working. For instance these work
<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
and these do not work
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
In my application.css.scss
file I am loading bootstrap-sprockets before bootstrap, i.e.
@import "bootstrap-sprockets";
@import "bootstrap";
I am using rails 4.2.2
, sass-rails', '~> 4.0.4'
, 'sprockets-rails', '>=2.1.4'
. Why is this not working?
Here is the relevant excerpt from the assets when I inspect the element chrome web tools:
/* 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";
}
Upvotes: 3
Views: 4419
Reputation: 381
In your application.scss:
@import 'bootstrap-sprockets';
@import 'bootstrap';
(be sure to first import bootstrap-sprockets)
(Found via https://github.com/twbs/bootstrap-sass/issues/653#issuecomment-47933937)
Upvotes: 2
Reputation: 1674
I succeeded to include glyphicons. Add the following font-face after included 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")
}
Reference: http://doruby.kbmj.com/taka/20140726/_Rails4_Bootstrap_assets_precompile_glyphicon_
Upvotes: 6
Reputation: 16373
I solved the problem by upgrading everything I could think of. The configuration that finally worked was
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'
Not sure which did it, but I was very pleased to see those glyphicons.
Upvotes: 3
Reputation: 13949
Try to recompile assets with rake assets:precompile
. If you are not in development mode, don't forget to add your environment rake assets:precompile RAILS_ENV=production
Upvotes: 1