Home/ Questions/Q 8593229
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T23:56:28+00:00

I started using the asset_sync gem in order to use Amazon S3 as a

  • 0

I started using the asset_sync gem in order to use Amazon S3 as a CDN asset host (I am using Heroku and RoR). All of my assets are loading correctly, except for the icons I am using through Twitter Bootstrap (There is just a blank space where the icon should be).

I tried using Heroku’s multiple asset pre-processor support:

app/assets/stylesheets/custom.css.scss.erb

background-image: url(<%= asset_path "../img/glyphicons-halflings.png"%>);

I also tried moving the glyphicons-halflings.png directly into the images folder and referencing it there:

app/assets/stylesheets/custom.css.scss.erb

background-image: url(<%= asset_path "/assets/glyphicons-halflings.png"%>);

app/assets/stylesheets/custom.css.scss

background-image: url("/assets/glyphicons-halflings.png");

However, I’ve haven’t found a way to make it work. Any suggestions on how to get the Twitter Bootstrap icons to work successfully with S3/Heroku would be greatly appreciated.

EDIT: I am using: gem 'bootstrap-sass', '~> 2.0.2'

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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";
    • 0