Ruby on Rails Bootstrap 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

假设您在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');
}

Answer 2

你也可以试试这个：

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

您只需要将 your_css.css 文件转换为 your_css.css.erb

Answer 3

在我的例子中，我使用了这个 <i class="icon-plus"></i>，我从 Bootstrap 的官方网站获取，但没有看到任何东西。但相反，必须使用这个<i class="glyphicon glyphicon-plus"></i>

Answer 4

确保你已经设置

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

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

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

Answer 5

在我的 index.html.slim 文件中，我将 span.glyphicon.glyphicon-calendar 替换为 span.fa.fa-calendar 并且它起作用了。

Answer 6

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

这是使用 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 7

您可以将所有引导字体文件复制到 public/fonts 并且它将起作用。无需在 application.rb 中导入或更改。

Answer 8

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 9

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

当我把它放在我的自定义css.css.scss文件的顶部时，这对我有用

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

Answer 10

对于我作为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 11

如果您正在使用 bootstrap-sass 并且遇到此问题，请尝试在您的一个 scss 文件中导入这样的引导程序。如果你使用 sass，只需转换语法：

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

Answer 12

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

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

Answer 13

我也在努力让 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 14

Bootstrap 3 图标如下所示：

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

而 Bootstrap 2 看起来像这样：

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

如果您使用的代码不是最新的（检查 b3 分支），那么您可能需要自行分叉并更改图标名称。

Answer 15

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

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

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

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

希望这会有所帮助！

Answer 16

我认为您的asset pipeline 可能有问题

您想将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 post 是否有类似问题

希望对你有帮助

Answer 17

根据Bootstrap 3 Glyphicons are not working 的说法，Bootstrap 定制器存在一个错误，它会弄乱 glyphicon 字体。我遇到了同样的问题，但我可以通过从 http://getbootstrap.com/ 下载整个引导程序来解决它，然后将字体文件复制到正确的位置。