Matt
Matt

Reputation: 821

Bootstrap only partially functional in rails -- glyphicons not working

I can't get my glyphicons to work in my Rails asset pipeline.

In stylesheets/application.sass, I have...

@import "bootstrap-sprockets"
@import "bootstrap"
@import "glyphicons"

I am using the bootstrap-sass and sass-rails gems

In stylesheets/glyphicons.css, I have...

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

It's weird, because this (below) works fine, giving me the red danger button...

<a class="detete btn btn-danger" href="#">x</a>

...while this one (below) does not work, not giving me either the grey default button or the star icon...

<a class="btn" href="#"><i class="icon-star-empty"></i></a>

That's why I say Bootstrap is only working "partially" for me. Any help on this would be much appreciated.

Upvotes: 0

Views: 80

Answers (2)

Nitin
Nitin

Reputation: 7366

By default Glyphicons font directory set to fonts folder. Instead you should define it with asset_path . So try add below code in app/assets/stylesheets/application.css.scs.

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

You might also need to make change in config/application.rb file.

config.assets.paths << "#{Rails}/vendor/assets/fonts"

Upvotes: 1

user5412340
user5412340

Reputation:

Have you added the following line to your application.js. you have not mentioned anything about your application.js here. I hope this will help you

//= require jquery
//= require bootstrap-sprockets

you can check the following link https://github.com/twbs/bootstrap-sass

Upvotes: 1

Related Questions