Rails 4.1和Bootstrap 3 glyphicons无法正常工作

Question

我试图摆脱使用Bootstrap 3的Rails 4项目中的glyphicon错误。我没有使用任何Bootstrap gems将其添加到资产管道。 我手动将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

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

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

Answer 2

为了让glyphicons工作，我必须在config / application.rb文件中添加一行。 在Application <Rails :: Application类中添加以下内容。

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

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

rake assets:precompile RAILS_ENV=development

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

这是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博客]

Answer 3

基本上你应该只导入bootstrap

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

在@import "bootstrap-sprockets";之前导入引导程序组件时出现问题@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";

Answer 4

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

RAILS_ROOT/vendor/assets/fonts

如果它不存在，请创建它。 它们应该出现在您下载的bootstrap构建中。

此外，您需要在所有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 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');
}
*/