Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save CodeBrotha/28c31618e2e3719737f330404e7b3631 to your computer and use it in GitHub Desktop.
Save CodeBrotha/28c31618e2e3719737f330404e7b3631 to your computer and use it in GitHub Desktop.
Get Glyphicons up and running in Rails 3.2 without using a gem

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment