bootstrap_glyphs_in_rails.md

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