CODEWITHSUNDEEP
cssruby-on-railsrubytwitter-bootstrap
Nappstir
Nappstir

Reputation: 995

Rails Bootstrap glyphicons

So I have been having a lot of issues with getting bootstraps glyphicons working. I have finally been able to get them to show on site. The only problem that I am now having, is I get the following errors in my DOM: 

GET http://localhost:3000/fonts/glyphicons-halflings-regular.woff2                      jquery.self-660adc5….js?body=1:3734
GET http://localhost:3000/fonts/glyphicons-halflings-regular.woff                       localhost/:1
GET http://localhost:3000/fonts/glyphicons-halflings-regular.ttf 404 (Not Found)        localhost/:1

Just so everyone is aware, when I select jquery.self-660adc5...js?body=1:3734 I get taken to the following line of code: support.inlineBlockNeedsLayout = val = div.offsetWidth === 3;

In my terminal I get the following:

Started GET "/fonts/glyphicons-halflings-regular.woff2" for ::1 at 2016-04-18 21:57:17 -0600

ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.woff2")

I currently have all bootstrap glyphicon files in vendor/assets/fonts/

glyphicons-halflings-regular.eot   glyphicons-halflings-regular.woff
glyphicons-halflings-regular.svg   glyphicons-halflings-regular.woff2
glyphicons-halflings-regular.ttf

In my application.css folder I have:

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

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

In application.rb

config.assets.paths << "#{Rails}/vendor/assets/fonts"
config.assets.precompile += %w(.svg .eot .woff .ttf .woff2)

In mime_types.rb

Rack::Mime::MIME_TYPES['.woff'] = 'application/x-font-woff'

I guess where I am confused is that the glyphicons are showing up and working, however, I am still getting the error in the DOM as well as in my terminal that these files cannot be found. Any suggestions on how I can handle this? I initially had the gem 'bootstrap-sass', '3.2.0.0' installed but ultimately just dl'd the bootstrap package and added it to my project.

Unfortunately I have yet to resolve this issue. For now I have included the Bootstrap CDN keys:

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

This obviously removes the errors for now. If anyone else has any solution or needs more information on how to solve this issue please do comment. I will be most eager to hear your thoughts.

Upvotes: 2

Views: 1407

Answers (1)

Sean Huber
Sean Huber

Reputation: 3985

You still need to add woff2 files to the asset pipeline:

config.assets.precompile += %w(.svg .eot .woff .woff2 .ttf)

Upvotes: 1

Related Questions