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