Glyphicons not showing - Rails 4.2.3 - Bootstrap 3.3.5

Question

I've been fighting with Bootstrap 3.3.5 and Rails 4.2.3 for a few days now trying to get Glyphicons showing in my app. I've managed to get jQuery-UI going and used the bootstrap-datetimepicker gem so I can see a useful calendar when selecting a date. However I can't figure out how to make the calendar icon appear.

The Glyphicons are sitting loose in app/assets/fonts/. JavaScript & JQuery-UI appear to be working just fine since the app navbar responds when you view it in mobile form & the datetimepicker works.

Just the icons to add and I'm done! Any help would be wonderful!

Application.css

 *= require jquery-ui
 *= require_self
 *= require_tree .
 */
body {
   padding-top: 60px;
}

Application.js

 //= require jquery
 //= require jquery-ui
 //= require jquery_ujs
 //= require moment
 //= require bootstrap-sprockets
 //= require bootstrap-datetimepicker
 //= require pickers
 //= require wice_grid
 //= require turbolinks
 //= require_tree .

Gem file

source 'https://rubygems.org'
gem 'rails', '4.2.3'
gem 'sqlite3'
gem 'sprockets-rails', :require => 'sprockets/railtie'
gem 'sass-rails'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'font-awesome-sass'
gem 'jquery'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'momentjs-rails', '~> 2.9'
gem 'datetimepicker-rails', github: 'zpaulovics/datetimepicker-rails', branch: 'master', submodules: true
gem 'devise'
gem 'simple_form'
gem 'cancancan'
gem 'wice_grid'
gem 'kaminari'
gem 'sdoc', '~> 0.4.0', group: :doc

# gem 'bcrypt', '~> 3.1.7'

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
  gem 'web-console', '~> 2.0'
  gem 'spring'
end

Datepicker in view

<%= f.input :risk_assessment_date, :as => :date_picker %>

The date picker works. The icons do not.

How are you loading bootstrap? I don't see it in your Gemfile or application.css . — vanburen, Sep 22 '15 at 20:22
There's a Bootstrap.css file in the app/assets/stylesheets folder. I'm guessing it's just magically being sucked in or being included because of require_tree . ? — , Sep 22 '15 at 20:23
Have you tried adding (@import) it to your application.css file though? This also might help: https://stackoverflow.com/questions/27662341/font-glyphicons-not-working-with-bootstrap-3-and-rails-4 and have you looked into using Bootstrap-SASS? — vanburen, Sep 22 '15 at 20:39
I have tried using Bootstrap-SASS to this project but I had 'undefined class .action-padding' (or something like that) coming up as an error. Maybe I'll revisit and add those errors to this post if you think that's the way to go? — , Sep 22 '15 at 21:29
I would go that route and one aspect often overlooked is renaming your application.css to application.scss then using @import for all the other SASS into the application.scss; if you go through the Docs you'll have it up and running in no time. https://github.com/twbs/bootstrap-sass — vanburen, Sep 22 '15 at 22:07
When I add bootstrap-sass gem to my gem file, and run bundle install, should I be expecting to see new files being added to my assets folder automatically? — , Sep 23 '15 at 07:51

vanburen · Answer 1 · 2015-09-28T12:26:22.623

Seems to be working as I would expect.

There are duplicate CSS + JS files with regard to your Gemfile loading dependencies coupled with the same files directly inside your assets folder and there is an application.css along with an application.scss (there should only be one, the SCSS version).

You can clean all these out and just use the Gemfile to access everything, you won't need to place any vendor files inside the app yourself.

Here is the stylesheet folder from the repo: CSS Files

application.css 
application.scss    
bootstrap.css   
bootstrap.css.map   
wice_grid.css   
wice_grid.css.map   
wice_grid.scss

Here is the js folder from the repo: JS Files

application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require turbolinks
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require wice_grid.js
//= require_tree .

Plus this Bootstrap file
bootstrap.js

Here's an image of how things look now. (The vendor/assets folder is Rails generated, you won't need to put those there yourself.)

Here is what I did/changed:

New application.scss (*Only application file for CSS). All of the custom CSS is now in a file called bootstrap-custom.scss (see image).

@import "jquery-ui";
@import "bootstrap-sprockets";
@import "bootstrap";
@import 'bootstrap-custom';
@import 'bootstrap-datetimepicker';
@import "wice_grid";
@import "font-awesome-sprockets";
@import "font-awesome";

New application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require wice_grid
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require turbolinks
//= require_tree .

New Gemfile (If any of the versions need to be different you can change it, shouldn't affect anything)

source 'https://rubygems.org'

gem 'rails', '4.2.3'
gem 'sqlite3'
gem 'sprockets-rails', :require => 'sprockets/railtie'
gem 'bootstrap-sass', '~> 3.3.5'
gem 'sass-rails'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'jquery'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'momentjs-rails', '~> 2.9'
gem 'datetimepicker-rails', github: 'zpaulovics/datetimepicker-rails', branch: 'master', submodules: true
gem 'devise'
gem 'simple_form'
gem 'cancancan'
gem "wice_grid", '3.6.0.pre4'
gem 'kaminari'
gem 'sdoc', '~> 0.4.0', group: :doc
gem "autoprefixer-rails"

# gem 'bcrypt', '~> 3.1.7'

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
  gem 'web-console', '~> 2.0'
  gem 'spring'
end

Make sure to run the following (again after you change everything) because you will get errors that these files cannot be found:

Hopefully this straightens everything out for you.

Hey @vanburenx, I've reverted back to a working version of my app. The repo is at www.github.com/garyruddell/minerva (if you grab the master) - The only thing that is not working for me is the Glyphicons on the date picker when you add a risk. If you wouldn't mind having I look I'd be very grateful indeed! Thank you buddy :) — , Sep 23 '15 at 18:54
If you go to the Risks page from the nav bar and edit an existing risk. The first field is a date field with a picker attached to it. Just no icon showing. The glyph icons are in the assets/fonts and the vendor/assets/fonts folders. Hope that helps buddy! — , Sep 26 '15 at 17:55
See the updated answer, seems to be working as I would expect. Hope this solves the issue. — vanburen, Sep 28 '15 at 12:27
thank you very much for your help. I will put this together tomorrow and report back. I hope I can be of help to you (or someone else) in the future! Peace brother! — , Sep 29 '15 at 19:31
Hey buddy, I updated your last post. Still bugging me out - it'll be even more interesting when they bring out Bootstrap 4! — , Oct 02 '15 at 11:53
Hi @vanburenx, I've picked up where I left off the other day and the page is loading now. None of the CSS is loading, and there is an error at the top that says "Error: file to import not found or unreadable: jQuery-ui. Load path, line 1 of application.scss - any ideas? Sorry to keep pestering you with this! — , Oct 04 '15 at 15:38

Glyphicons not showing - Rails 4.2.3 - Bootstrap 3.3.5

1 Answers1