[Solved] Bootstrap 3+Rails 4 – Certain Glyphicons not working

I am trying to use bootstrap 3 in my rails 4 app. Followed this tutorial to set up bootstrap 3 using bootstrap saas from this github page.

Bootstrap is working fine but glyphicons are not working as expected.

Certain glyphicons are not displaying at all. For e.g. I tired to display a few of them for testing in my application.html.erb:

glyphicon glyphicon-floppy-disk -> <span class="glyphicon glyphicon-floppy-disk"></span>
</br>
glyphicon glyphicon-plus -> <span class="glyphicon glyphicon-plus"></span>
</br>
glyphicon glyphicon-minus -> <span class="glyphicon glyphicon-minus"></span> 

The icons render like this

The floppy-disk icon is not rendered at all (showing an invalid charecter)
The plus and minus sigs are not bold and much smaller than the ones shown on the bootstap website.

I am also seeing the following messages on the rails console.

Started GET "/fonts/glyphicons-halflings-regular.woff" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.woff"):

Started GET "/fonts/glyphicons-halflings-regular.ttf" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.ttf"):

Started GET "/fonts/glyphicons-halflings-regular.svg" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.svg"):

I would really appreciate your inputs on this issue.

Thanks!

Enquirer: Mike G

||

Solution #1:

I had the same problem and found a solution. Full credit goes to Eric Minkel, who wrote a detailed blog post on the topic. I would highly suggest reading it for further reasoning.

  1. Edit app/assets/stylesheets/application.css by adding:

    *= require bootstrap
    
  2. Edit app/assets/javascripts/application.js by adding:

    //= require bootstrap
    
  3. In config/application.rb, add the following after class Application < Rails::Application. It should look like this:

    class Application < Rails::Application
        config.assets.paths << "#{Rails}/vendor/assets/fonts"
    
  4. In the terminal, compile your assets by running:

    rake assets:precompile RAILS_ENV=development
    
  5. Edit the bootstrap.css file by changing @font-face resource locations from ../fonts/ to /assets/. It should look like this:

    @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');
    }
    

You’re done. Just restart with rails s and the glyphicons should appear.

Respondent: oddurs

Solution #2:

Just use:

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

in your SCSS or SASS file.
“bootstrap-sprockets” is required for image and font fix.

Chances are you already have:

@import "bootstrap";

declared in application.scss.

Respondent: istickz

Solution #3:

I was having this same problem. Solved by adding:

@import "bootstrap-sprockets";

above the existing line:

@import 'bootstrap';

in my /app/stylesheets/bootstrap_and_customisation.css.scss file

Respondent: Yorkshireman

Solution #4:

I had the same problem. Something is wrong with the font path in bootstrap. Fortunately it is a fairly easy fix:

$icon-font-path: 'bootstrap/';

This fixed it for me. Should go before importing bootstrap-sass. You might need to change the value here.

Respondent: Radoslav Stankov

Solution #5:

Update to this. I was having the same issue and went through the steps provided by the #1 answer from Oddurs. That didn’t work for me for some reason. And then I realized it had to do with the file structure in my public folder (not sure why mine was different).

Basically I got it to work by adding “/bootstrap” after “/assets” since all my glyphicons were in a “/bootstrap” folder I believe by default

So instead of this:

@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');
}

I did this:

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

in the application.css. Hopefully that helps somebody

Respondent: strohy1210

Solution #6:

Another solution would be copying the fonts folder into public so you have

public/fonts/glylpicons-.....

The same solutions would work for font-awesome etc.
The only downside of this is if you change your font-files often :o)

Respondent: DaCart

Solution #7:

If you are using bootstrap-sass-official, add this before you import bootstrap:

$icon-font-path: 'bootstrap-sass-official/assets/fonts/bootstrap/';

Respondent: dipole_moment

Solution #8:

For me this was an issue with incompatibility of versions between bootstrap-sass and sass.

If you inspect your generated application.css you will see the @font-face is wrapped inside a @at-root, which is a new sass declaration not supported by the version of sass I was using.

I’ve upgraded sass-rails to 5.0.3 and sass to 3.4.16 and it worked (sass needs to be at least 3.3).

Respondent: Giórgenes

Solution #9:

I had a similar problem and discovered an older version of the bootstrap assets were being served. Thanks to this post: Rails with Twitter Bootstrap: still serving an old asset I just ran rake tmp:clear and all worked after that.

Respondent: mahi-man

Solution #10:

I am using twitter-bootstrap-rails, and the error message is /assets/twitter/fonts/…

The reason is the twitter-bootstrap-rails gem doesn’t include the Glyphicons resources in it’s vendor directory. I have tried all solutions above, but none of them worked.

The final solution for me is to download the zip file from bootstrap official site, unzip it, move the missing files to public/assets/twitter/fonts directory. It works for my development environment.

Respondent: chao yan

Solution #11:

Make sure your gemfile is up to date and that the vendor/cache is clear.

My issue was due to odd versions of gems, so I ran bundle update which refreshed the cache.

Updating files in vendor/cache
Removing outdated .gem files from vendor/cache
  * bullet-4.14.9.gem
  * bootstrap-sass-3.3.5.gem
  * pry-0.10.2.gem
  * webmock-1.21.0.gem
  * sprockets-2.12.4.gem
  * minitest-reporters-1.1.3.gem
  * sass-3.2.19.gem
  * coffee-rails-4.0.1.gem
  * hashie-3.4.2.gem
  * newrelic_rpm-3.13.2.302.gem
  * nprogress-rails-0.1.6.7.gem
  * schema_plus_pg_indexes-0.1.7.gem
  * hike-1.2.3.gem
  * minitest-5.8.1.gem
  * tilt-1.4.1.gem
  * sass-rails-4.0.5.gem
Bundle updated!

Once I did that, for good measure I make for other caches cleared too rake assets:clobber and re-compiled the assets RAILS_ENV=production rake assets:precompile.

Then I restarted nginx ../bin/restart and magic…. the glyphicons appeared instead of a odd square thing in Firefox on the desktop and a camera on the iPad. All in place of the man glyphicon.

Respondent: Turgs

Solution #12:

Ran into same problems when upgrading to Rails 4.1.4, bootstrap-sass 3.2.0.

Good hints above but none did the trick for me.

These steps worked:

  1. Copy font files to RAILS_ROOT/vendor/assets/fonts/bootstrap/ (you probably need to create the directory)

  2. Add this to config/application.rb

    config.assets.paths += %W("#{Rails.root}/vendor/assets/fonts")

Didn’t need any special directives or sass variable re-definitions.

Respondent: Foot

Solution #13:

I was having trouble viewing:

<span class="glyphicon glyphicon-edit"></span>

in my development environment. The following adjustment worked.

In your css.scss file add:

@import "bootstrap-sprockets";
@import 'bootstrap';
Respondent: erickuhn19

Solution #14:

If you are tired of the magic of bootstrap-sass or twitter-bootstrap-rails, or if you want to stay with a specific version of bootstrap, here is manual thing you can do:

  • Download bootstrap from http://getbootstrap.com/, put the files inside your #{Rails.root}/vendor/assets/javascripts

  • In the file app/assets/javascripts/application.js, write //= require 'bootstrap-3.3.6-dist/js/bootstrap.min'

  • In the file app/assets/stylesheets/application.css, write *= require 'bootstrap-3.3.6-dist/css/bootstrap.min'

  • Put a script like this in your {Rails.root}/bin and configure it to run by capistrano when you deploy to production:

#!/usr/bin/env ruby     

rails_path = File.expand_path('../../', __FILE__)
puts rails_path

`mkdir public/images`

Dir.glob("#{rails_path}/vendor/assets/**/images").each do |directory|
  `cp #{directory}/* #{rails_path}/public/images/`
end

`mkdir public/fonts`

Dir.glob("#{rails_path}/vendor/assets/**/fonts").each do |directory|
  `cp #{directory}/* #{rails_path}/public/fonts/`
end
  • Configure nginx on your production machines to serve public/images and public/fonts.
        location ~ ^/(assets|images|fonts)/(.*)$ {
            alias /var/www/my_app/current/public/$1/$2;
            gzip on;
            expires max;
            add_header Cache-Control public;
        }

From now on, each time you say cap production deploy, all the manual things will be taken care of.

Respondent: Châu H?ng L?nh

Solution #15:

You can copy all the bootstrap font files to public/fonts and it will work

Respondent: Danut Codrescu

Solution #16:

Using rails 4.2.6

I had to edit config/application.rb

I added this line

.
.
.
class Application < Rails::Application
   config.action_controller.relative_url_root = '/myapp'

Now the fonts were being referenced relative to the relative_url_root value.

Respondent: mwangi

Solution #17:

Adding the following to application.scss worked for me on Rails 5 (after uncommenting @import "bootstrap/glyphicons";from the same file [using the orats gem])

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

Solution #18:

I am using angular-ui-bootstrap-rails gem

gem ‘angular-ui-bootstrap-rails’

I downloaded bootstrap and pasted the fonts folder under app/assets folder

Then restart rails server.

Respondent: Mahesh

Solution #19:

In my case: We are planning to upgrade our legacy app from Rails 3.2 to Rails 4.0. And suddenly the glyph icons didn’t show up. We were using gem 'bootstrap-sass', '~> 3.0.3.0' so could not upgrade to latest 3.4


Problem Definition

The main reason seems to be unresolved sass function call twbs-font-path(" in file http://localhost:3000/assets/bootstrap/application.self.css?body=1

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

which should have been like this

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

Solution

New installation guideline for Rails seems to be

// app/assets/stylesheets/bootstrap/application.scss
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

but problem is file bootstrap-sprockets is not defined in the version I am using. So I have to copy the content of the file from GitHub and create it in my codebase.

// app/assets/stylesheets/bootstrap/_bootstrap-sprockets.scss

@function twbs-font-path($path) {
  @return font-path($path);
}

@function twbs-image-path($path) {
  @return image-path($path);
}

And it solved the problem.
I hope it also helps you.

Respondent: illusionist

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.