Using boostrap.css file in Rails production/heroku w/o LESS or SASS

1
votes

I'm trying to use the glyphicons provided by bootstrap in my rails 4.0beta1 app. Everything works fine in development, but in production nothing gets rendered, and in the heroku logs I get the following error:

ActionController::RoutingError No Route Matches [GET] "/assets/glyphicons-halflings.png"

This is how I'm calling the image file in boostrap.css:

[class^="icon-"],
[class*=" icon-"] {
 background-image: url("/assets/glyphicons-halflings.png");
}

This is how I'm rendering it in the view:

<i class="icon-user"></i>

When I run rake assets:precompile and start up the production server with rails s -e production, then I can no longer see the icons. I'm not sure why this is the case. I'm not using any gems associated with bootstrap, I just have the plain bootstrap.css file and the image file under assets/images.

EDIT: I also added a .erb extension (bootstrap.css.erb) to use the asset_path helper, but I still only see the icons in development, not production.

Anybody have any ideas?

2
ruby-on-railstwitter-bootstrapherokuasset-pipelineruby-on-rails-4

2 Answers

2
votes

Well, oddly, background-image did not seem to work in production. I was loading other background images using just the background: property, so I tried that and now it (magically) works in production:

background: url(<%= asset_path 'glyphicons-halflings.png' %>);

with bootstrap.css.erb as the filename.

Still confused as to why background-image was working in development but not production ...

0
votes

Try this simple approach:

background-image: url('gliphicons-halflings.png')

EDIT: glyphicons.scc.scss.erb

@font-face {
font-family: 'Glyphicons';
src: url('<%= asset_path('glyphicons-regular.eot')%>');
src: url('<%= asset_path('glyphicons-regular.eot?#iefix')%>') format('embedded-opentype'), url('<%= asset_path('glyphicons-regular.woff')%>') format('woff'), url('<%= asset_path('glyphicons-regular.ttf')%>') format('truetype'), url('<%= asset_path('glyphicons-regular.svg#glyphicons_halflingsregular')%>') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="glyphicons-"]:before {
display: inline-block;
font-family: 'Glyphicons';
font-style: normal;
font-weight: normal;
text-decoration: inherit;
*display: inline;
*zoom: 1;

}