Rails Asset Pipeline + Bootstrap 3 Fonts
I admit it, I find the Rails Asset Pipeline confusing at times (as do seemingly many others judging from Stackoverflow and elsewhere). Successfully adding the Bootstrap 3 glyphicon fonts took some trial-and-error amongst the various solutions I found as many still resulted in not found errors.
While there may be a better way, I found this approach most effective:
- Copy the contents of the Bootstrap "dist/fonts" directory to the "vendor/assets/fonts" directory (you will need to create a "fonts" directory. Bootstrap's minified JavaScript and CSS files can be copied to the appropriate directly in "vendor/assets" as well.
- Add the following to "config/application.rb" within the application config block:
config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')
config.assets.precompile += %w(.svg .eot .woff .ttf)
- Utilizing SASS (or LESS) here is useful in order to leverage built-in asset pipeline helper methods. In a common file used across your site, include the following:
@font-face {
font-family: 'Glyphicons Halflings';
src: font-url('glyphicons-halflings-regular.eot');
src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
font-url('glyphicons-halflings-regular.woff') format('woff'),
font-url('glyphicons-halflings-regular.ttf') format('truetype'),
font-url('glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
Thus far, Not Found errors seem to have been eliminated. If there is a better way, please comment.