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');
}