Obromios
Obromios

Reputation: 16373

Some Glyphicons not working with bootstrap-sass

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

Answers (4)

phildub
phildub

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

asukiaaa
asukiaaa

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

Obromios
Obromios

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

Cyril Duchon-Doris
Cyril Duchon-Doris

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

Related Questions