Rails 4.1 和 Bootstrap 3 字形图标不起作用

Question

我正在尝试消除使用 Bootstrap 3 的 Rails 4 项目中的字形图标错误。我没有使用任何 Bootstrap gem 将其添加到资产管道中。我手动将 bootstrap.css 和 bootstrap.js 添加到它们各自的 app/assets 目录中，并将它们添加到 application.css 和 application.js 我现在在我的 Web 浏览器的控制台中看到以下内容：

GET http://localhost:3000/fonts/glyphicons-halflings-regular.woff 404 (Not Found) localhost/:1
GET http://localhost:3000/fonts/glyphicons-halflings-regular.ttf 404 (Not Found) localhost/:1
GET http://localhost:3000/fonts/glyphicons-halflings-regular.svg 404 (Not Found) 

如何在 Ruby on Rails 应用程序中解决此问题？我尝试将上述文件复制到app/assets/fonts 并将其弹出到application.rb：

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

运气不好。

Answer 1

将 woff、ttf 和 svg 文件添加到：

RAILS_ROOT/vendor/assets/fonts

如果它不存在，则创建它。它们应该存在于您下载的引导程序构建中。

此外，您需要在所有 require 语句之后将其添加到 application.css：

@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

为了让字形图标正常工作，我必须在 config/application.rb 文件中添加一行。在类 Application 中添加以下内容

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

然后在终端运行命令以获取要编译的资产：

rake assets:precompile RAILS_ENV=development

现在我们需要更新 bootrap.css 文件（您可能也需要更新 bootstrap.min.css 文件），使用文本编辑器搜索 @font-face 并将路径更新为包含 /assets/glyphicons-halfings-regular.* 的字体 URL（包括文件扩展名）。

这是 url 最初在 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');
}

您希望将每个资源位置更改为 /assets/glyphicons-halfings-regular.*，如下所示。

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

来源：[Erik Minkel Blog]

Answer 3

上面提供的所有解决方案都是肮脏的黑客。解决此问题的正确方法是在您的 sass 文件中引导之前包含“bootstrap-sprockets”：

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

Answer 4

将字体移动到 /app/public 文件夹有效，但看起来不像 Rails 方式。

对我有用的是将它们放入 /app/assets/fonts 并在 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.woff2') format('woff2'), 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');
}
*/

Answer 5

基本上你应该只导入引导程序

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

在@import "bootstrap-sprockets"; 之前导入引导组件时出现问题 覆盖应该在@import "bootstrap-sprockets";之后进行

// bootstrap-sprockets goes first
@import "bootstrap-sprockets";

// Overrides
@import "bootstrap/variables"; // it uses $bootstrap-sass-asset-helper which is defined in bootstrap-sprockets
$btn-primary-bg: $gray-light;

@import "bootstrap";