Glyphicons missing

[homebase-dev]

Hi there,

I'm using twitter-bootstrap-rails in my app and somehow the glyphicons assets are missing, even after I uncommented the line stated in the docs. I googled a lot but still could not resolve this problem.

Screenshot here:

I'm using:

• Rails 4.1.8
• ruby 2.1.5 (2014-11-13) [x86_64-linux]

My _bootstrap_and_overrides.less_ looks like this:

@import "twitter/bootstrap/bootstrap";

// Set the correct sprite paths
@iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
@iconWhiteSpritePath: image-
https://github.com/seyhunak/twitter-bootstrap-rails/issues/new#url("twitter/bootstrap/glyphicons-halflings-white.png");

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// @fontAwesomeEotPath: font-url("fontawesome-webfont.eot");
// @fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix");
// @fontAwesomeWoffPath: font-url("fontawesome-webfont.woff");
// @fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf");
// @fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");

// Font Awesome
// @import "fontawesome/font-awesome";

// Glyphicons
@import "twitter/bootstrap/glyphicons.less";

My _gemfile_

source 'https://rubygems.org'

gem 'rails', '4.1.8'
gem 'mysql2'
gem 'devise'
gem 'haml', '~> 4.0.5'

gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"

gem 'carrierwave'
gem 'mini_magick'
gem 'mathjax-rails'
gem 'html2haml'
gem 'ckeditor'
gem 'omniauth-facebook'
gem 'prawn'
gem 'prawn-table'
gem 'devise-i18n'
gem 'kaminari'
gem 'sass-rails', '~> 4.0.3'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0',          group: :doc

gem 'tzinfo-data', platforms: [:mingw, :mswin]

How I access the glyphicon in the view

...
  %a.left.carousel-control{"data-slide" => "prev", :href => "#myCarousel", :role => "button"}
    %span.glyphicon.glyphicon-chevron-left{"aria-hidden" => "true"}
    %span.sr-only Previous
  %a.right.carousel-control{"data-slide" => "next", :href => "#myCarousel", :role => "button"}
    %span.glyphicon.glyphicon-chevron-right{"aria-hidden" => "true"}
    %span.sr-only Next

...

I played around a bit and I noticed that when I run a rake assets:precompile in production mode and having a look at the assets folder, it seems that the glyphicons are in the wrong directory? Could this have something to do with this problem?

[torstenb]

I had the same problem with the Fontawesome icons when using less. I've setup my own fork with a fix and submitted a pull request. (But it hasn't been accepted yet.) You can try my fix by replacing the following line in your Gemfile

gem "twitter-bootstrap-rails"

with

gem "twitter-bootstrap-rails", github: 'torstenb/twitter-bootstrap-rails'

Or simply add the line for @fa-font-path to your bootstrap_and_overrides.less:

[...]
@fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");

// Font Awesome
@import "fontawesome/font-awesome";
@fa-font-path: "/assets"; // Override fontawesome less variable in order for it to work with Rails asset pipeline 
[...]

Let me know if that fixes it for you as well.

[homebase-dev]

Hey torstenb,

thanks for your help! I tried to replace the gem with yours, unfortunately it didn't work with it either. So I stopped webrick and deleted the whole content of the tmp folder, just in case.. afterwards I restarted the webserver and then something different happened:

I also tried to just add the @fa-font-path statement to my bootstrap_and_overrides.less, but still, the assets weren't found. Tried including it also in combination with your gem, but didn't work either for me (same error again).

[toadkicker]

This was fixed and released in railsstrap. Give it a try!

[torstenb]

The fix I provided is for the Fontawesome icons. So your bootstrap_and_overrides.less should look like this:

@import "twitter/bootstrap/bootstrap";

// Set correct font paths
@glyphiconsEotPath: font-url("glyphicons-halflings-regular.eot");
@glyphiconsEotPath_iefix: font-url("glyphicons-halflings-regular.eot?#iefix");
@glyphiconsWoffPath: font-url("glyphicons-halflings-regular.woff");
@glyphiconsTtfPath: font-url("glyphicons-halflings-regular.ttf");
@glyphiconsSvgPath: font-url("glyphicons-halflings-regular.svg#glyphicons_halflingsregular");

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
@fontAwesomeEotPath: font-url("fontawesome-webfont.eot");
@fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix");
@fontAwesomeWoffPath: font-url("fontawesome-webfont.woff");
@fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf");
@fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");

// Font Awesome
@import "fontawesome/font-awesome";
@fa-font-path: "/assets"; // Override fontawesome less variable in order for it to work with Rails asset pipeline 

// Glyphicons
//@import "twitter/bootstrap/glyphicons.less";

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// @link-color: #ff0000;

[maier-stefan]

thanks. now it runs in dev fine, but still missing in production. what could be the reason?

[cooltribes]

Hi, any update on this? I could not make it work in production.

[psylone]

I have the same problem with Fontawesome icons. Fixed by added this

@fa-font-path: "../..";

as the last line in the _bootstrap_andoverrides.css.less

Unfortunately, I couldn't find using of @fontAwesomeEotPath variable during @font-face definition.

[MaffooClock]

Apparently, this is still a problem. I have tried the @fa-font-path suggestions listed here, but neither seem to make any difference, and I still have the funky placeholder icons as shown in homebase-dev's first screenshot.

[MaffooClock]

Wellp, it never fails; I can spend a few hours on something like this, and as soon as I post a comment, I stumble upon a resolution within minutes. In this case, I was missing the fa class from my <i> tags.

<i class="fa-arrow-left"></i> becomes <i class="fa fa-arrow-left"></i>

(FWIW: I've been upgrading my application from twitter-bootstrap-rails v2.2.8 to v3.2.0, and always had icon-* classes. Now, I'm having to rename them to fa-* and add an additional fa class.)

[freemanoid]

Still doesn't work for twitter-bootstrap-rails 3.2.0, rails 4.2.1.

[meierjan]

@freemanoid I fixed it like this: http://stackoverflow.com/questions/20255711/ruby-on-rails-bootstrap-glyphicons-not-working/30868672#30868672

[stefanhendriks]

@meierjan thanks. I was looking into this since yesterday and the tips above do not work (like @freemanoid says). But your suggestion seems to work fine.

[rlopzc]

any solution to this issue? @cooltribes did you resolved the issue in the production server? i have the same error.

@stefanhendriks something?

[robotex82]

I having the same error on heroku/production on rails 4.2.4/twitter-bootstrap 3.2.0.

[hhameed]

None of the above suggestions work for heroku deployment. The sugggestion on stackoverflow works only for localhost

[d-a-v-e]

Still having issues myself in production using heroku

[popup-user]

I am also having this problem still - on my development/production machines using twitter-bootstrap-rails (3.2.2), ruby (2.3.0), and rails (4.2.5). I get an empty box when I use the html: <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

I tried @meierjan 's fix and it worked well locally, but not when I pushed to heroku

[d-a-v-e]

@toadkicker used railsstrap and no longer have this issue! works very well.

[popup-user]

I figured out a solution! I noticed that If you read /app/assets/stylesheets/bootstrap_and_overrides.css there's a note:

Use Font Awesome icons (default)
  To use Glyphicons sprites instead of Font Awesome, replace with "require twitter-bootstrap-static/sprites"
  =require twitter-bootstrap-static/fontawesome

I swapped the require statements and it worked! I added a comment to stackoverflow about it here: http://stackoverflow.com/questions/20255711/ruby-on-rails-bootstrap-glyphicons-not-working/30868672#comment57269123_30868672

[slhck]

The following post from Stack Overflow worked for me:

In application.css, add:

 @font-face {
   font-family: 'Glyphicons Halflings';
   src: url('../assets/glyphicons-halflings-regular.eot');
   src: url('../assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
   url('../assets/glyphicons-halflings-regular.woff') format('woff'),
   url('../assets/glyphicons-halflings-regular.ttf') format('truetype'),
   url('../assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
 }

[doooby]

oh boy did the original code ever worked? since asset's path on production includes hash digest..

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('<%= font_path 'glyphicons-halflings-regular.eot' %>');
  src: url('<%= font_path 'glyphicons-halflings-regular.eot' %>?#iefix') format('embedded-opentype'),
  url('<%= font_path 'glyphicons-halflings-regular.woff' %>') format('woff'),
  url('<%= font_path 'glyphicons-halflings-regular.woff2' %>') format('woff2'),
  url('<%= font_path 'glyphicons-halflings-regular.ttf' %>') format('truetype'),
  url('<%= font_path 'glyphicons-halflings-regular.svg' %>') format('svg');
}

[nhattan]

Change application.css to application.scss, then add:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: font-url('glyphicons-halflings-regular.eot');
  src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  font-url('glyphicons-halflings-regular.woff2') format('woff2'),
  font-url('glyphicons-halflings-regular.woff') format('woff'),
  font-url('glyphicons-halflings-regular.ttf') format('truetype'),
  font-url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

worked for me!

[volonterx]

And don't forget to uncomment @import "twitter/bootstrap/glyphicons.less"; in bootstrap_and_overrides.less file after adding @font-face { .... in application.scss

[mickgeek]

Just use the next code inside the bootstrap_and_overrides.css.less file:

@import "twitter/bootstrap/bootstrap";

// Glyphicons are not required by default, uncomment the following lines to enable them.
@icon-font-path: "../../";
@import "twitter/bootstrap/glyphicons.less";

[mahi07101991]

Remove @import bootstrap and add the cdn. to your scss file. @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

[martijn10kb]

Super late to the party, but for future people.. Or I do hope this can somehow time travel and it is helpful for people 4 years ago.., because you really shouldn't need this in 2023 :)

app/assets/stylesheets/application.css

 *= require twitter-bootstrap-static/sprites