Ruby on Rails引导程序Glyphicons不工作

Question

我已经在我的站点中添加了引导程序。这是我正在使用的结构。（我无法删除bootstrap.css文件，因为我根据自己的喜好对其进行了修改）。

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

所有内容都被正确导入，但问题是字形图标不起作用，我需要它们！

Answer 1

2015年11月编辑：我推荐这款宝石：https://github.com/twbs/bootstrap-sass它由Bootstrap社区积极维护，与RubyonRails配合使用非常好。

我有一个和你非常相似的问题，但我解决了！在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');
}

并用CCD_ 2代替CCD_。这就是您的最终代码的样子。

@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用户：

感谢在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字形图标在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.scs文件和

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和Sass）

@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分支），那么你可能不得不分叉并更改图标名称。

Answer 7

显然，Chrome在这个问题上已经坏了好几个月了。

当我把它放在我的customization_css.css.scss文件的顶部时，这对我很有效

@import 'bootstrap-sprockets';
@import 'bootstrap';
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

Answer 8

您也可以尝试以下操作：

@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.woff2") %>') format('woff2'), 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');
}

您只需要将自己的_css.css文件转换为_css.css.erb

Answer 9

您可以将所有引导程序字体文件复制到public/fonts中，它就可以工作了。无需在应用程序中导入或更改.rb.

Answer 10

我尝试了建议的解决方案，但它对我不起作用，这里有一个通用的解决方案可以帮助您解决与此相关的任何问题。

以下是使用bootstrap sass得到的字体定义：

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

Answer 11

根据Bootstrap 3，Glyphicons不工作，Bootstrap自定义程序有一个错误，混淆了glyphicon字体。我也遇到了同样的问题，但我可以通过从http://getbootstrap.com/，然后将字体文件复制到正确的位置。

Answer 12

在Rails 4中，使用sass、Bootstrap 3.2.0和Bootstrap sass gem使用：

@import "bootstrap";
@import "bootstrap/theme";

Answer 13

当我在rails应用程序中使用bootstrap时，我使用bootstrap-sass-gem。

https://github.com/thomas-mcdonald/bootstrap-sass

您可以覆盖它。只需按照文档说明导入即可。然后导入或粘贴修改后的文件。

在php项目中，字形不起作用，我下载了经典的bootstrap zip，并提取了字形文件以在项目中替换它们。在我的记忆中，当你从他们的网站生成自定义的引导程序样式时，这个错误就会出现（错误的来源可能是错误的）。

希望这能有所帮助！

Answer 14

在我的index.html.slim文件中，我用../fonts/1替换了span.glyphicon.glyphicon-calendar，它成功了。

Answer 15

确保已设置

# config/environments/production.rb
config.assets.compile = true

并将字体添加到预编译列表

# config/initializers/assets.rb
config.assets.precompile += %w(*.eot *.svg *.ttf *.woff *.woff2)

Answer 16

在我的案例中，我使用了这个<i class="icon-plus"></i>，它是我从Bootstrap的一个意外站点获取的，但没有看到任何东西。但是，有必要使用这个<i class="glyphicon glyphicon-plus"></i>

Answer 17

如果您在app/assets/fonts中有glyphicons文件（如果没有，可以从bootstrap-saas repo下载），创建app/assets/stylesheets/fonts.scss并添加以下内容：

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