Bootstrap glyphicons not showing rails app--path issue?

Question

I'm trying to get a Glyphicon to show up using Bootstrap in a Rails app, but I can't figure out how to get it to show. I've read through several questions on here that attempt to solve this problem by fixing the path. However, having gone through those questions/answers, I'm still stuck b/c the glyphicon won't show up.

Both the images and stylesheets are in the same "Assets" directory. The HTML I'm using seems to be working fine b/c when I inspect the element in Chrome it's finding the appropriate class, which is linking to the Bootstrap stylesheet.

HTML:

<p><%= link_to raw('<i class="icon-share-alt"></i>'), post %></p>

CSS (default from Bootstrap EXCEPT I updated /img to /images b/c that's what my images directory is called):

[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../images/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}

One more comment that might help. When I inspect element on Chrome and hover over the "../images/glyphics..." in the right rail of the inspect element section, Chrome cites localhost:3000/assets/../images/glyphicons-halflings.png as the path, which is NOT the correct path from the root of my application. I suspect this is just shorthand in Chrome, but, then again, seems odd they wouldn't cite the correct path unless this is the root of my problem. That said, I still don't know how to fix it.

Answer 1

TL;DR: use bootstrap-sass gem instead (the rest of the answer below suggests bootstrap-rails gem, which is not as convenient, because then you need other dependencies, like LESS, and it gets a bit complicated.

First of all, I should mention that there's more than one way to add Bootstrap to your app. I've tried the manual way first (which I suspect is what you're doing), and actually got into the same problem as you did (not sure if for the same cause or not). So then I've tried the recommended way, which is through a gem called twitter-bootstrap-rails. I followed this railscast:

http://railscasts.com/episodes/328-twitter-bootstrap-basics

Then I ran into a problem, however, of not having another gem - 'less', which was causing a nasty runtime error. So I've added two more gems, for a total of three, to my Gemfile: - gem 'twitter-bootstrap-rails' - gem 'therubyracer' - gem 'less-rails' (missing this was the cause for the runtime error).

Their exact role I am still not sure about -- but they play an important role in Rails asset pipeline. 'less' is what Bootstrap depends on, apparently, instead of 'sass', which Rails comes with.

So, after installing them with bundle install -- those, and their other dependencies, most notable libv8 -- I've got Bootstrap working perfectly, including <i class="icon-share-alt"></i> =)

Answer 2

I'm assuming you're using Rails version 3.1 or later since you are mentioning the "assets" folder, which is part of the Asset Pipeline feature of Rails. Briefly, anything you put in the "app/assets" folder at the base of your rails project will be automagically routed to the assets folder on your server. For example:

• your_app/app/assets/stylesheets/style.css >>> localhost:3000/assets/style.css
• your_app/app/assets/images/button.png >>> localhost:3000/assets/button.png
• your_app/app/assets/javascripts/script.js >>> localhost:3000/assets/script.js

In other words, rails lets you organize your files in your source folder, but combines them all together for the end user in the assets folder. For more information about the Asset Pipeline, see Ruby on Rails Guides: Asset Pipeline.

Your problem is that your CSS knows nothing about rails, and when its code is interpreted in the browser, it sees itself in the assets folder. This is also true of the other images and javascripts you have. The easiest solution would be to change url("../images/glyphicons-halflings.png"); to url("/assets/glyphicons-halflings.png");. This works because both the CSS file and the image will see each other in the assets folder when viewed in the browser.

A second solution would to use the sass-rails gem. If you generated your app using the default method, you'll likely find it in your Gemfile. If that's the case, then you can rename your CSS file from something.css to something.css.scss (or .css.sass, but I prefer the former). This will let you use rails's built-in support for SASS, specifically the following:

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

The image-url command when used in your rails app's .css.scss file will take care of finding the image and outputting the right folder.

A third option would be to use the twitter-bootstrap-rails gem, which is compatible with the asset pipeline in Rails 3.1 or later.

Answer 3

For those wondering why the icons do not display in production mode, try replacing the css property background-image with background instead:

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

... and optionally add a .erb extension to the end of your boostrap.css file so that the asset_path helper works. This is without the use of any bootstrap gems.

More on this from another SO question here.

Answer 4

I found this link to be super helpful.

Answer 5

Please, see this answer. It's better than modify css file, where turns dificult to upgrade to newer versions. So, the ideia is simple, create routes to this files or a generic one with parameter interpreter. Other simple solution is put this images in "public/img".