Search code examples
twitter-bootstrapruby-on-rails-4bootstrap-sass

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

Solution

  • 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.