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
@vcruzrey
Copy link

It works!
By far, this was the best and easiest way to add those nice Glyphicons to a rail app.
Thank you very much!

@iamatypeofwalrus
Copy link
Author

No problem!

Copy link

ghost commented Oct 21, 2014

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!

@jason-rutherford
Copy link

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'.

@ashujpr99
Copy link

Thanks alot

@kyrasteen
Copy link

You saved me much despair, thanks!

@akz92
Copy link

akz92 commented Jul 12, 2015

Works perfectly. Thank you!

@JayJayChild
Copy link

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

@elliebartling
Copy link

Perfect. Thank you!

@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