[英]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. 我安装了bootstrap-sass Gem并尝试使用某些字形,但它们并未以正确的方式显示。 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 ✏
. 对于大多数glyphicons我刚刚得到这个:
和铅笔例如我得到这个✏
。 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 application.css.scss
/*
*= require jquery-ui
*= require_tree .
*= require_self
*/
@import "bootstrap-sprockets";
@import 'bootstrap';
application.js 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 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: 编辑1:
My code creates following html: 我的代码创建以下html:
<a class="btn btn-xs" title="Show" href="/houses/1">
<span class="glyphicon glyphicon-info-sign"></span>
</a>
After specifying the Gem version of the rails-sass.gem and the bootstrap-sass.gem it finally works. 在指定rails-sass.gem和bootstrap-sass.gem的Gem版本之后,它终于可以工作了。
gem 'bootstrap-sass', '~> 3.3.5.1'
gem 'sass-rails', '~> 5.0.1'
Following documentation of bootstrap-sass , you have to remove *= require_self
and *= require_tree
in you application.css.scss
. 根据bootstrap-sass的文档,您必须在
application.css.scss
remove *= require_self
和*= require_tree
。
Then, remove all the *= require_self and *= require_tree .
然后,删除所有* = require_self和* = require_tree。 statements from the sass file.
sass文件中的语句。 Instead, use @import to import Sass files.
而是使用@import导入Sass文件。
Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.
不要在Sass中使用* = require,否则您的其他样式表将无法访问Bootstrap mixins或变量。
So you can use @import 所以你可以使用@import
application.css.scss application.css.scss
/*
*= require jquery-ui
*/
@import "bootstrap-sprockets";
@import 'bootstrap';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.