0

I installed the bootstrap-sass Gem and tried to use some glyphicons but they're just not showing in the right way. Its looks like the browser is using replacements for the actual glyphicons but it doesn't give me any error message.

For most glyphicons I just get this one: and for the pencil for example i get this ✏. It looks like the browser can't find them but my stylesheets are getting loaded properly as far as I can tell. So is there maybe a problem in the gem that I have to fix?

My code looks like this:

application.css.scss

/*
 *= require jquery-ui
 *= require_tree .
 *= require_self
 */

@import "bootstrap-sprockets";
@import 'bootstrap';

application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap-sprockets
//= require moment
//= require jquery_nested_form
//= require turbolinks
//= require ckeditor/init
//= require_tree .

index.html.erb

<%= link_to booking_path(booking), :class => 'btn btn-xs', :title => "#{ t('.show', :default => t('helpers.links.show')) }" do %>
    <%= glyph 'info-sign' %>
<%- end -%>

If you need any more information let me know please.

Edit1:

My code creates following html:

<a class="btn btn-xs" title="Show" href="/houses/1">
  <span class="glyphicon glyphicon-info-sign"></span>
</a>
Syk
  • 393
  • 4
  • 19

2 Answers2

1

After specifying the Gem version of the rails-sass.gem and the bootstrap-sass.gem it finally works.

gem 'bootstrap-sass', '~> 3.3.5.1'
gem 'sass-rails', '~> 5.0.1'
Syk
  • 393
  • 4
  • 19
0

Following documentation of bootstrap-sass, you have to remove *= require_self and *= require_tree in you application.css.scss.

Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use @import to import Sass files.

Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.

So you can use @import

application.css.scss

/*
 *= require jquery-ui
 */

@import "bootstrap-sprockets";
@import 'bootstrap';
akbarbin
  • 4,985
  • 1
  • 28
  • 31
  • Thanks for the try. Didn't bring any change though. – Syk Oct 09 '15 at 14:27
  • 1
    Do you have fonts glypicon? please do like this http://stackoverflow.com/questions/20255711/ruby-on-rails-bootstrap-glyphicons-not-working. I hope this help you – akbarbin Oct 09 '15 at 14:52
  • I saw this thread already and tried it but i am not really sure how it should be done. All my stylesheets are getting loaded via asset pipeline. So I searched in the gem directory for the specific section but I can't find a 100% fitting code. All I can find is the `_bootstrap.scss` which is loading the `_glyphicons.scss`. In that file the font path is described as `$icon_font_path` and that should be OK if I understand the gem documentation correctly: `$icon-font-path defaults to bootstrap/ if asset path helpers are used, and ../fonts/bootstrap/ otherwise.` – Syk Oct 09 '15 at 15:33
  • Could it be that something with my encoding is wrong? I can't use symbols like `×` for example! – Syk Oct 12 '15 at 12:04