Ruby on Rails Bootstrap Glyphicons无效

Question

我已经在我的网站上添加了bootstrap.这是我正在使用的结构.(我无法删除bootstrap.css文件,因为我根据自己的喜好对其进行了修改).

>app
>>assets
>>>fonts
>>>>4 glypicons icon files.
>>>images
>>>>N/A
>>>javascripts
>>>>Bootstrap.js (Jquery is installed in a gem)
>>>stylesheets
>>>>Bootstrap.css

一切都是正确导入,但问题是glyphicons不工作,我需要它们!

Answer 1

2015年11月编辑:我会推荐这个gem:https://github.com/twbs/bootstrap-sass它由Bootstrap社区主动维护,并且与Ruby on Rails配合得非常好.

我和你有一个非常相似的问题,但我弄清楚了!在bootstrap.css文件中找到这个部分:

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

并替换../fonts/为/assets.这是你的最终代码的样子.

@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');
}

我希望这有帮助!

Answer 2

如果您正在使用bootstrap-sass并且遇到此问题,请尝试在您的某个scss文件中导入这样的bootstrap.如果您使用sass,只需转换语法:

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

Answer 3

对于我作为twitter-bootstrap-rails用户:

感谢take的帖子@ GitHub

添加这个:

/* Override Bootstrap 3 font locations */
@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');
}

我application.css解决了这个问题.

希望对你有所帮助.

Answer 4

我也在努力使boostrap3 glyphicon在rails 4中工作.我通过添加来解决它

@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');
}`

到application.css.scss文件和

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

到application.rb文件.

Answer 5

我认为您可能遇到资产管道问题

您想要更改bootstrap.css为bootstrap.css.scss然后替换它使用的位置

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

用font-path(看第2.3.2节- CSS和萨斯)

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

也在你的 config/environments/production.rb

# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )

在你的 config/application.rb

# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

检查另一个SO帖子是否存在类似问题

希望这可以帮助

Answer 6

Bootstrap 3图标看起来像这样:

<i class="glyphicon glyphicon-indent-right"></i>

而Bootstrap 2看起来像这样:

<i class="icon-indent-right"></i>

如果您使用的代码不是最新的(检查b3分支),那么您可能需要分叉并更改自己的图标名称.