Twitter-Bootstrap-Rails on Heroku: Glyphicons Displayed as Squares

twitter-bootstrap-rails on Heroku: Glyphicons displayed as squares

Fixed it. The CSS that was causing the problem:

[class^="icon-"], [class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;

was part of Fontawesome, which is included by default in twitter-bootstrap-rails. The issue was that the Fontawesome icon files were not being precompiled, because they are unusual filetypes. I went into the production.rb environment file, and added '.woff', '.eot', '.svg', '.ttf' to the config.assets.precompile list. I then re-compiled my assets, and the icons showed up! Boom.

Bootstrap glyphicons appearing as squares

Well I managed to resolve this with

    *= require font-awesome

in my css file but am still confused as to why the twitter-bootstrap functioned with only the exception of the icons.

twitter-bootstrap icons do not appear in heroku

I solved the problem by downloading icon images directly from glyphicons.com, putting them into app/assets/images, setting config.serve_static_assets to true, running rake assets:precompile, and pushing to heroku.

rake aborted couldn't find file twitter/bootstrap while deploying to heroku

I solved this issue by using following steps:

1. Move twitter-bootstrap-rails gem from outside of :assets in gemfile.
2. Update twitter-bootstrap-rails gem version 2.2.6 or
   just paste below line in your gemfile.
   gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'

(or)

if twitter-bootstrap-rails 2.2.6 is not working then
Use twitter-bootstrap-rails gem latest version.

Twitter Bootstrap icons not working with Amazon S3 and Heroku (using asset_sync gem)

If you are using gem 'bootstrap-sass', the following is a solution that worked for me.

First, download bootstrap from the bootstrap website. Extract the two icon .png files (glyphicons-halflings.png and glyphicons-halflings-white.png) and copy them into your apps image directory (app/images).

In your custom.css.scss file (this could be a different name depending on your app) enter the following at the top of your stylesheet (before you import bootstrap) to override the icon image path:

 $iconSpritePath: url('/assets/glyphicons-halflings.png');
 $iconWhiteSpritePath: url('/assets/glyphicons-halflings-white.png');

 @import "bootstrap";

Rails twitter bootstrap icons don't show up

Try copying glyphicons-halflings.png to RAILS_ROOT/app/assets/images. Do you still get the 404 - page not found error?

---

Related Topics