CODEWITHSUNDEEP
ruby-on-railsglyphiconsbootstrap-sass
Syk
Syk

Reputation: 393

bootstrap-sass in Rails 4 not showing the proper glyphicons

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>

Upvotes: 0

Views: 580

Answers (2)

Syk
Syk

Reputation: 393

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'

Upvotes: 1

akbarbin
akbarbin

Reputation: 5105

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

Upvotes: 0

Related Questions