Bootstrap 3+Rails 4 - Certain Glyphicons not worki

Question

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!

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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

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