Some Glyphicons not working with bootstrap-sass

Question

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

It is a ruby on rails application, so it is difficult to demo that section of the code, and it is not yet deployed. The relevant html is the four line aboves, two of which give the correct symbol and two give a square. I do not think my styling that impacts on this as it seems to be exactly the same problem as the post cited above. I am using the bootstrap-sass gem. I have described the relevant section of the application.css.scss file. Is there anything else that you would like to know? — Obromios, Jul 17 '15 at 07:58
I am working in development and am not precompiling. I do however have ```config.assets.debug = false```. — Obromios, Jul 18 '15 at 06:57
It works for me, and my gemfile shows `bootstrap-sass (3.3.4.1)` Did you do an update recently and you might have old precompiled bootstrap assets ? — Cyril Duchon-Doris, Jul 19 '15 at 23:25

score 6 · Answer 1 · answered Nov 20 '15 at 07:43

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_

This leads to a delay between page load and display of icons. And I suggest using `font-url` instead of `image-url`. — Joshua Muheim, Oct 09 '19 at 11:30

Obromios · Accepted Answer · 2015-08-03T20:50:01.723

3

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.

edited Aug 03 '15 at 20:50

answered Aug 03 '15 at 10:35

Obromios

15,408
15
72
127

score 2 · Answer 3 · answered Nov 03 '16 at 22:09

2

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)

answered Nov 03 '16 at 22:09

phildub

381
4
8

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; – nelson6e65 Feb 19 '20 at 01:03

score 1 · Answer 4 · answered Jul 19 '15 at 23:29

1

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

answered Jul 19 '15 at 23:29

Cyril Duchon-Doris

12,964
9
77
164

I have now tried ```rake assets:precompile``` from the command line. It did not fix the problem. It is occurring in development mode. – Obromios Jul 20 '15 at 11:00
Did you also try to set `config.assets.debug` to true temporarily ? – Cyril Duchon-Doris Jul 20 '15 at 11:02
I have tried this and it did not work. Also, please see above, where I have added the relevant excerpt from the assets. – Obromios Jul 21 '15 at 22:03
Did you try a different browser ? Maybe you have some Google Chrome plugin messing up with the cache ? – Cyril Duchon-Doris Jul 21 '15 at 22:10
Can you try to manually downgrade to `bootstrap-sass 3.3.4.1` to see if it fixes anything ? It may be a bug introduced in that version you're using. I also use `sass-rails 5.0.3` but I don't think it's a problem if you use a different version. – Cyril Duchon-Doris Jul 24 '15 at 14:20

Some Glyphicons not working with bootstrap-sass

4 Answers4