Clever Geek Handbook

Some glyphicons not working with bootstrap

As per this post, here's the issue with some glyphicons not working, but the issue was fixed in bootstrap-sass. But I am using bootstrap-sass 3.3.5 and some still don't work. For example, these works

<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>

and they don't 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 loading, i.e.

@import "bootstrap-sprockets";
@import "bootstrap";

I use the rails 4.2.2

, sass-rails', '~> 4.0.4'

, 'sprockets-rails', '>=2.1.4'

. Why doesn't it work?

Here is a relevant asset excerpt as I inspect the chrome element's 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";
}
+3


source to share


4 answers


I resolved the problem by updating everything I could think of. The config that ended up working 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 if I did it, but I was very pleased to see these glyphicons.

+2


source


I was able to enable glyphicons. Add the following font after bootstrap enabled.

@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")
}


Link: http://doruby.kbmj.com/taka/20140726/_Rails4_Bootstrap_assets_precompile_glyphicon_

+5


source


Try to recompile the assets with rake assets:precompile

. If you are not in development mode, remember to add your environmentrake assets:precompile RAILS_ENV=production

+1


source


In your application.scss:

@import 'bootstrap-sprockets';
@import 'bootstrap';

(be sure to import bootstrap asterisks first)

(Found via https://github.com/twbs/bootstrap-sass/issues/653#issuecomment-47933937 )

+1


source






More articles:


All Articles