Question

我正在尝试摆脱使用Bootstrap 3的Rails 4项目中的glyphicon错误。我没有使用任何Bootstrap gems将其添加到资产管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录，并将它们添加到application.css和application.js我现在看到的是我的网络浏览器中的以下内容＆＃ 39;控制台：

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＆lt;类中添加以下内容导轨::应用。

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最初在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

基本上你应该只导入bootstrap

@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";

Answer 4

将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 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');
}
*/

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

5 个答案: