1

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?

kwyoung11
  • 968
  • 1
  • 10
  • 31

2 Answers2

2

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 ...

kwyoung11
  • 968
  • 1
  • 10
  • 31
0

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;

}

R Milushev
  • 4,295
  • 3
  • 27
  • 35
  • Just curious, do you use a file `glyphicons.css.scss.erb` in your project? There sould be a definition for `@font-face` about glyphicons. – R Milushev Jun 21 '13 at 06:40
  • Nope, I don't. Just the bootstrap.css file and the glyphicon image files. – kwyoung11 Jun 21 '13 at 06:46
  • I think you two may be discussing two different versions of bootstrap, with Rumen answering from the perspective of Bootstrap 3. – jrhorn424 Oct 22 '13 at 02:49