Skip to content

Instantly share code, notes, and snippets.

@iamatypeofwalrus
Last active February 9, 2022 15:27
Show Gist options
  • Save iamatypeofwalrus/6467148 to your computer and use it in GitHub Desktop.
Save iamatypeofwalrus/6467148 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
@LaurierMantel
Copy link

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

@mradambeck
Copy link

Not working for me either. :(

@bparanj
Copy link

bparanj commented May 19, 2016

It does not work for Twitter Boostrap 4.

@jmuheim
Copy link

jmuheim commented Oct 9, 2019

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

@iamatypeofwalrus
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment