Rails 4.1和Bootstrap 3的图标无法正常显示

Question

我正在尝试消除我的Rails 4项目中使用Bootstrap 3时出现的glyphicon错误。我没有使用任何Bootstrap gem将其添加到asset pipeline中。我手动将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"

没有运气。

- randombits

Answer 1

以上提供的所有解决方案都是不规范的临时方法。正确解决此问题的方法是在 Sass 文件中在引入 Bootstrap 之前包含 "bootstrap-sprockets"：

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

- Lucas

Answer 2

基本上，您只需导入bootstrap。

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

在导入@import "bootstrap-sprockets";之前导入Bootstrap组件会出现问题。覆盖应该在@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";

- NDan

Answer 3

为了让字形图标起作用，我不得不在config/application.rb文件中添加一行代码。在class Application < Rails::Application内部添加以下内容。

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

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

rake assets:precompile RAILS_ENV=development

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

这是bootstrap.css文件中原始的url。

@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博客]

- Tamer Shlash

---

我在开发中避免预编译资产。Rails会提供缓存的预编译资产，而不是你试图开发的更改...这会引起很多麻烦。 - penner

Answer 4

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

RAILS_ROOT/vendor/assets/fonts

如果这个不存在的话，就创建它。它们应该存在于你下载的Bootstrap构建中。

另外，在你的application.css文件中，需要在所有require语句之后添加以下内容：

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

- Nikhil

---

有什么理由将它们放在供应商目录下，而不是通常的 app/assets/ 目录下？ - randombits

如果在application.css/js文件中明确提到，那么vendor/*资产才会被包含。这可能是你应该处理任何你不自己编写的东西的方式。在我的项目中，bootstrap始终位于vendor/*树中。 - Nikhil

似乎我唯一能让它工作的方法是将字体复制到public/fonts目录中，不确定这是否是正确的做法。 - randombits

或许没有比这种方式更"正确"的了 - https://github.com/twbs/bootstrap-sass - 这是在Rails应用中包含Bootstrap的官方推荐方式。 - Nikhil

最终，我按照@randombits的建议进行了一些黑客行为，直接将字体文件复制到“public/assets/fonts”中。虽然我不太喜欢这种方法，但在阅读了十几篇博客文章和多个StackOverflow答案后，这是唯一有效的方法。 - Joe

@randombits 拯救了我的一天！ - iGian

Answer 5

将字体移动到/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');
}
*/

- Leigh