css - Rails Bootstrap 字形图标

Question

因此，在让 bootstraps glyphicons 正常工作方面，我遇到了很多问题。我终于能够让他们在现场展示。我现在遇到的唯一问题是我的 DOM 中出现以下错误:

GET http://localhost:3000/fonts/glyphicons-halflings-regular.woff2                      jquery.self-660adc5….js?body=1:3734
GET http://localhost:3000/fonts/glyphicons-halflings-regular.woff                       localhost/:1
GET http://localhost:3000/fonts/glyphicons-halflings-regular.ttf 404 (Not Found)        localhost/:1

为了让每个人都知道，当我选择 jquery.self-660adc5...js?body=1:3734 时，我会转到以下代码行:support.inlineBlockNeedsLayout = val = div.offsetWidth === 3;

在我的终端中，我得到以下信息:

Started GET "/fonts/glyphicons-halflings-regular.woff2" for ::1 at 2016-04-18 21:57:17 -0600

ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.woff2")

我目前在 vendor/assets/fonts/ 中拥有所有 bootstrap glyphicon 文件

glyphicons-halflings-regular.eot   glyphicons-halflings-regular.woff
glyphicons-halflings-regular.svg   glyphicons-halflings-regular.woff2
glyphicons-halflings-regular.ttf

在我的 application.css 文件夹中我有:

@import "bootstrap-sprockets";
@import "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');
}

在application.rb

config.assets.paths << "#{Rails}/vendor/assets/fonts"
config.assets.precompile += %w(.svg .eot .woff .ttf .woff2)

在 mime_types.rb

Rack::Mime::MIME_TYPES['.woff'] = 'application/x-font-woff'

我想我感到困惑的地方是 glyphicons 正在显示并正在工作，但是，我仍然在 DOM 和我的终端中收到无法找到这些文件的错误。关于如何处理这个问题有什么建议吗？我最初安装了 gem 'bootstrap-sass', '3.2.0.0' 但最终只是 dl'd Bootstrap 包并将其添加到我的元素中。

不幸的是我还没有解决这个问题。现在我已经包含了 Bootstrap CDN key :

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

这显然暂时消除了错误。如果其他人有任何解决方案或需要有关如何解决此问题的更多信息，请发表评论。我将非常渴望听到您的想法。

Answer 1

您仍然需要将 woff2 文件添加到 Assets 管道:

config.assets.precompile += %w(.svg .eot .woff .woff2 .ttf)