Getting Glyphicons to work with static Bootstrap 3 CSS and Rails 3.2

Glyphicons will not work correctly on production Rails apps in the default static Bootstrap 3 installation. The issue is that the compiled (static) Bootstrap CSS file has hardwired location ../fonts for the fonts that will not work with the default Rails asset pipeline. I’ve seen several solutions on the web that involve editing the Bootstrap CSS file, but I dislike that approach since it breaks the next time you install an updated Bootstrap unless you remember to re-make the same edits.

Copy the entire Glyicons /fonts folder to the app/assets/stylesheets folder, e.g., put the fonts in a fonts subdirectory of the stylesheets folder.

Add the following to bootstrap_and_overrides.css

/* Override Bootstrap 3 font locations */ 
@font-face { 
  font-family: 'Glyphicons Halflings'; 
  src: url('/assets/fonts/glyphicons-halflings-regular.eot'); 
  src: url('/assets/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'), 
  url('/assets/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
  url('/assets/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); 
}