Matt
Matt

Reputation: 821

Bootstrap Glyphicons not working on Rails

In my Rails 5 app, I have this in my application.sass file...

/*
 *= require bootstrap-sass-official
 ...
 */

 @font-face
   font-family: 'Glyphicons Halflings'
   src: url('/assets/glyphicons-halflings-regular.eot')
   src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg')

...as per the advice in Ruby on Rails Bootstrap Glyphicons not working. I get this error in my Chrome console: Failed to decode downloaded font: http://localhost:3000/assets/glyphicons-halflings-regular.woff, etc.. for the various font formats.

Do I need to put anything into my Rails assets fonts folder? If so, what specifically? Thanks so much for any help on this.

Upvotes: 0

Views: 1598

Answers (1)

idej
idej

Reputation: 5734

As the application is Rails 5, better way - place your fonts in the folder app/assets/fonts.

If you want to place them outside fonts folder, you'll need to add the following configuration:

config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

And then can use urls as your mentioned

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

Upvotes: 1

Related Questions