CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3herokutwitter-bootstrap
flyingarmadillo
flyingarmadillo

Reputation: 2139

Twitter Bootstrap Glyphicons in Heroku

I have developed an app in which I used twitter bootstrap for some front end appeal. Every looked fine locally, however, when I deployed to heroku, the Glyphicons got all messed up. In Google Chrome, all of the Glyphicons are squares. In firefox, all of the Glyphicons are some strage looking square as well. I installed bootstrap with the gem (https://github.com/seyhunak/twitter-bootstrap-rails):

gem "twitter-bootstrap-rails", :group => :assets

Also, here is a screen shot of the the google chrome & firefox messed up Glyphicons, as well as how the Glyphicons look locally:

https://i.sstatic.net/6p29a.jpg

Here is a screenshot of the Glyphicons css loaded in the browser on Heroku:

https://i.sstatic.net/Gs9Yb.png

Here is a screenshot of the Glyphicons css locally:

https://i.sstatic.net/ABkIn.png

Any and all input would be massively appreciated.

Upvotes: 2

Views: 1540

Answers (3)

jesal
jesal

Reputation: 7948

font_assets gem is specifically created for this. Using that solved the issue for me. (If you are serving your assets from CloudFront don't forget to invalidate your assets after installing this gem.)

Upvotes: 0

KnownColor
KnownColor

Reputation: 449

I had a similiar problem using the bootstrap-sass gem. In the end I had to copy the 4 font files directly into the public/assets/bootstrap folder (where the 404 was occurring when trying to access the files).

This feels messy but I don't understand enough about how to debug properly to find a better approach.

Upvotes: 1

flyingarmadillo
flyingarmadillo

Reputation: 2139

Ok, I found my solution in this github post.

All I did was move the gem out of the assets category. From this:

gem "twitter-bootstrap-rails", :group => :assets

To this:

gem "twitter-bootstrap-rails"

And the Glyphicons now work perfectly.

Upvotes: 2

Related Questions