Get Glyphicons up and running in Rails 3.2 without using a gem

bootstrap_glyphs_in_rails.md

Getting Glyphicons from Bootstrap 3.0 in Rails: the easy way

What

Bootstrap 3.0 gives you access to the awesome icon set icon set by these dudes but it's not obvious for a Rails newbie like myself to get it all working together nicely

How

1. Download the bootstrap-glyphicons.css from here. Save that file to RAILS_ROOT/vendor/assets/stylesheet/bootstrap-glyphicons.css

2. Save all the font files in /dist/fonts from the Bootstrap 3.0 download to a new folder in your Rails app RAILS_ROOT/vendor/assets/fonts

3. Add this folder to the asset pipeline by appending config.assets.paths << Rails.root.join("vendor","assets", "fonts") to application.rb after the line that has class Application < Rails::Application.

4. In bootstrap-glyphicons.css modify the the url paths in @font-face to read /assets/FILE_NAME instead of ../fonts/FILE_NAME

   Example:

    src:url('../fonts/glyphicons-halflings-regular.eot');
   

   becomes

    src:url('/assets/glyphicons-halflings-regular.eot');
   

   There are only about 5 times in the file where you have to do this and they are all on the same line (~ line 63).

5. Beer me.

Now What?

Now you can kick icons around like you're Messi or something. Try adding <span class="glyphicon glyphicon-search"></span> to an html page and bask in the glory of icons. Or don't. Your call.

Sources

1. NetDNA Bootstrap CDN
2. StackOverflow
3. Ruby Docs - Asset Pipeline
4. Yet another asset pipeline blog post

Ok - this works but I'm honestly confused as to why it works. When loading the site with asset compile turned off (as it should be in production) the bootstrap path to the font files is like this:
font-family:'Glyphicons Halflings';src:url(/assets/glyphicons-halflings-regular.eot)

That path does not exist. The glyphicons-halflings-regular.eot file exists under /public/assets/ but with the compiled name, ie glyphicons-halflings-regular-0f3d15597eadce7b61d56v4a4dr36e0b.eot

How is rails figuring out where to serve this file from as the path in the css file isn't even valid?

Thanks!

I had this issue too. My issue with the solution above is that I really don't want to modify any of the vendor files (ie. bootstrap). I noticed the 'http://localhost:3000/assets/glyphicons-halflings-regular.eot' worked, but bootstraps default css is looking for 'http://localhost:3000/assets/fonts/glyphicons-halflings-regular.eot' which is not found.

The way I fixed it is by adding the asset path to bootstrap in config/application.rb.

config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components', 'bootstrap')

Now it is able to find ''http://localhost:3000/assets/fonts/glyphicons-halflings-regular.eot'.

Thanks alot

You saved me much despair, thanks!

Works perfectly. Thank you!

Am I the only person this didn't work for? I just got a small square where the icon is supposed to be =/

Perfect. Thank you!

I get the small square where the icon is supposed to be as well

Not working for me either. :(

It does not work for Twitter Boostrap 4.

Any update on this issue? I'm still having problems with it, see twbs/bootstrap-sass#1204

Hey y’all, this gist is like 6 years old. There are probably better ways to do this now.

At its simplest you just need to configure a server to serve static assets.