Bootstrap 3 + Rails 4 - 某些图标未能正常显示

Question

我正在尝试在我的Rails 4应用程序中使用Bootstrap 3。遵循此教程，使用来自此 GitHub 页面的Bootstrap Saas设置Bootstrap 3。

Bootstrap正常工作，但是字形图标没有像预期那样工作。

某些字形图标根本不显示。例如，我在application.html.erb中尝试显示其中一些以进行测试：

glyphicon glyphicon-floppy-disk -> <span class="glyphicon glyphicon-floppy-disk"></span>
</br>
glyphicon glyphicon-plus -> <span class="glyphicon glyphicon-plus"></span>
</br>
glyphicon glyphicon-minus -> <span class="glyphicon glyphicon-minus"></span> 

这些图标的显示效果类似于此处。

软盘图标根本没有显示（显示为无效字符）。 加号和减号符号不是粗体，并且比在Bootstrap网站上显示的要小得多。

我还在Rails控制台上看到以下信息。

Started GET "/fonts/glyphicons-halflings-regular.woff" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.woff"):

Started GET "/fonts/glyphicons-halflings-regular.ttf" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.ttf"):

Started GET "/fonts/glyphicons-halflings-regular.svg" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.svg"):

我非常希望您对这个问题提供意见。

谢谢！

- Mike G

---

你看过这篇帖子吗：https://dev59.com/OmMl5IYBdhLWcg3we283？ - Beel

我已经检查过了，还尝试从Bootstrap网站复制字体文件，但也没有帮助。由于我正在使用Sass Bootstrap，您能告诉我"@font_face.."的更新是否适用于我？如果是，我应该更新哪个文件呢？谢谢！ - Mike G

你把字体目录复制到哪里了？当你在浏览器中访问/fonts/glyphicons-halflings-regular.woff时会发生什么？ - lobanovadik

Answer 1

我曾经遇到过同样的问题，并找到了解决方法。完全感谢Eric Minkel，他在博客上详细介绍了这个主题。我强烈建议阅读以获取更多的理由。

1. Edit app/assets/stylesheets/application.css by adding:

   *= require bootstrap
   

2. Edit app/assets/javascripts/application.js by adding:

   //= require bootstrap
   

3. In config/application.rb, add the following after class Application < Rails::Application. It should look like this:

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

4. In the terminal, compile your assets by running:

   rake assets:precompile RAILS_ENV=development
   

5. Edit the bootstrap.css file by changing @font-face resource locations from ../fonts/ to /assets/. It should look like this:

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

你已经完成了。只需使用rails s重新启动，字形图标就会出现。

- oddurs

---

我曾经遇到过同样的问题，一些字体丢失了。第四步解决了我的问题。谢谢。 - user2110836

谢谢，问题已解决...我使用了css.min，所以我将其解压并进行了修改步骤5。 - user762579

除此之外，我还需要在我的application.rb文件中添加config.assets.precompile += %w( *.svg *.eot *.woff *.ttf )以使预编译器能够识别字体文件。 - Adam Plumb

不要忘记在vendor/assets中创建fonts文件夹并将字体复制到其中。字体可以从bootstrap网站的bootstrap.zip中获取。 - Marat

rake assets:precompile RAILS_ENV=development 就是我所需要的。这个答案真的不应该在底部。 - LunaCodeGirl

Answer 2

只需使用：

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

在您的SCSS或SASS文件中需要引用"bootstrap-sprockets"来进行图片和字体的修复。

很可能您已经有了：

@import "bootstrap";

在application.scss中声明。

- istickz

---

一样的情况。我更新了我的 gem，但在执行此操作之前，它并没有正常工作。 - Mark Hustad

我已经在我的application.css.scss文件中导入了这些内容，但是我仍然得到方框而不是字形图标 :/ - Mr_LinDowsMac

重要提示：顺序很重要。 - Andrew Potapov

Answer 3

我遇到过同样的问题。通过添加以下内容解决：

@import "bootstrap-sprockets";

在现有线条之上：

@import 'bootstrap';

在我的 /app/stylesheets/bootstrap_and_customisation.css.scss 文件中

- Yorkshireman

Answer 4

我有同样的问题。Bootstrap 中的字体路径出了问题。幸运的是，这是一个相当容易解决的问题：

$icon-font-path: 'bootstrap/';

这对我有帮助。应该在导入bootstrap-sass之前使用。你可能需要在这里更改值。

- Radoslav Stankov

---

这对我来说非常有效，同时也适用于Rails 4.1。我在开发环境下进行了测试（并删除了整个public / assets文件夹） - 它起作用了。然后我切换到需要预编译的资产在environments/development.rb中config.assets.debug = false; config.assets.compile = false; config.assets.digest = true和 $ rake assets:precompile，可以在public/assets/bootstrap中看到字体。重启了rails，它也运行良好。非常感谢你！ - peterept

我的application.scss文件中包含的完整字体如下：@font-face { font-family: 'Glyphicons Halflings'; src: url(asset_path('bootstrap/glyphicons-halflings-regular.eot')); src: url(asset_path('bootstrap/glyphicons-halflings-regular.eot?#iefix')) format('embedded-opentype'), url(asset_path('bootstrap/glyphicons-halflings-regular.woff')) format('woff'), url(asset_path('bootstrap/glyphicons-halflings-regular.ttf')) format('truetype'), url(asset_path('bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular')) format('svg'); } - peterept

确认这是适用于Rails 4.2.1的解决方案。 - Marius Butuc

不，这对于Rails 4.2.1不起作用。至少在这里不行，而且至少不能使用“glyphicon-log-book”图标。它仍然是不可见的。 - RubyRedGrapefruit

Answer 5

更新内容。我遇到了同样的问题，按照Oddurs提供的第一条答案进行了步骤，但是似乎对我没有用。后来我意识到问题出在我的公共文件夹结构上（不确定为什么我的与众不同）。

基本上，我通过在“/ assets”之后添加“/ bootstrap”来使其工作，因为我相信所有的图标都在“/ bootstrap”文件夹中默认存在。

所以，而不是这个：

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

我做了这个：

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

在application.css中。希望这可以帮助某些人。

- strohy1210

Answer 6

另一个解决方案是将字体文件夹复制到公共文件夹，这样您就可以拥有该字体。

public/fonts/glylpicons-.....

相同的解决方案也可以用于font-awesome等字体库。唯一的缺点是如果您经常更改字体文件 :o)。

- DaCart

Answer 7

如果您使用的是bootstrap-sass-official，那么在导入bootstrap之前，请添加以下内容： $icon-font-path: 'bootstrap-sass-official/assets/fonts/bootstrap/';

- dipole_moment

Answer 8

对我来说，这是bootstrap-sass和sass版本不兼容的问题。

如果您检查生成的application.css文件，您会看到@font-face被包装在@at-root中，这是一个新的sass声明，而我使用的sass版本不支持它。

我已将sass-rails升级到5.0.3，sass升级到3.4.16，然后它就可以工作了（sass需要至少3.3版本）。

- Giórgenes

Answer 9

我曾遇到类似问题，发现bootstrap资产的旧版本正在被提供。感谢这篇文章：Rails with Twitter Bootstrap: still serving an old asset。我只需运行rake tmp:clear，之后所有都正常工作了。

- mahi-man

Answer 10

我正在使用twitter-bootstrap-rails，但出现了错误消息“/assets/twitter/fonts/...”。

原因是twitter-bootstrap-rails宝石没有包含其供应商目录中的Glyphicons资源。我尝试了以上所有解决方案，但都没有奏效。

对于我来说，最终的解决方案是从Bootstrap官方网站下载zip文件，解压缩并将丢失的文件移动到public/assets/twitter/fonts目录中。这在我的开发环境中有效。

- chao yan