Css Rails 4.1和Bootstrap 3图标不工作

我正在尝试消除我的Rails4项目中使用Bootstrap3的glyphicon错误。我没有使用任何引导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) 

如何在RubyonRails应用程序中解决这个问题？我尝试将上述文件复制到

app/assets/font

中，并将其弹出到

application.rb

：

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

---

config.assets.path将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');
}

为了让glyphicons正常工作，我必须在config/application.rb文件中添加一行。在类Application
config.assets.paths << "#{Rails}/vendor/assets/fonts"

现在我们需要更新bootrap.css文件（您可能也需要更新bootstrap.min.css文件），使用文本编辑器搜索@font-face并更新字体URL的路径，以包括/assets/glyphions 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/glyphions 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');
}

来源：
以上提供的所有解决方案都是肮脏的黑客。解决此问题的正确方法是在引导之前将“引导链轮”包含在sass文件中：

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

将字体移动到/app/public文件夹很有效，但看起来不像Rails那样

对我有效的方法是将它们放在/app/assets/font中，并在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');
}
*/

基本上，您应该只导入引导

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

在导入引导链轮之前导入引导组件时会出现问题
覆盖应该在导入引导链轮之后进行

有什么理由把它们放在vendor目录下而不是通常的
app/assets/
目录下吗？只有在application.css/js文件中明确提到vendor/*资产时，才会包括它们。这可能是你应该如何处理你自己没有写的东西。在我的项目中，bootstrap总是在vendor/*树中。看来我唯一能让它工作的方法就是将字体复制到public/fonts目录中，不确定这样做是否正确。这可能是官方推荐的在Rails应用程序中包含引导的方法。最后，我用@randombits建议的方法将字体文件直接复制到
public/assets/fonts
中。我不喜欢它，但在阅读了十几篇博客文章和多个StackOverflow答案后，这是唯一有效的方法。我避免在开发中预编译资产。Rails将服务于缓存的预编译资产，而不是您试图开发的更改。。。会引起头痛。
@import "bootstrap-sprockets";
@import "bootstrap";

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