Twitter Bootstrap 图标不适用于 Amazon S3 和 Heroku（使用asset_sync gem）答案

【问题标题】：Twitter Bootstrap icons not working with Amazon S3 and Heroku (using asset_sync gem)Twitter Bootstrap 图标不适用于 Amazon S3 和 Heroku（使用asset_sync gem）
【发布时间】：2012-05-20 23:37:15
【问题描述】：

我开始使用asset_sync gem in order to use Amazon S3 as a CDN asset host（我正在使用 Heroku 和 RoR）。我的所有资产都正确加载，除了我通过 Twitter Bootstrap 使用的图标（图标应该在的地方只有一个空白）。

我尝试使用 Heroku 的多资产预处理器支持：

app/assets/stylesheets/custom.css.scss.erb

background-image: url(<%= asset_path "../img/glyphicons-halflings.png"%>);

我还尝试将 glyphicons-halflings.png 直接移动到 images 文件夹并在那里引用它：

app/assets/stylesheets/custom.css.scss.erb

background-image: url(<%= asset_path "/assets/glyphicons-halflings.png"%>);

app/assets/stylesheets/custom.css.scss

background-image: url("/assets/glyphicons-halflings.png");

但是，我还没有找到让它工作的方法。任何关于如何让 Twitter Bootstrap 图标成功地与 S3/Heroku 一起工作的建议将不胜感激。

编辑：我正在使用：gem 'bootstrap-sass', '~> 2.0.2'

【问题讨论】：

标签： ruby-on-rails-3 heroku amazon-s3 icons twitter-bootstrap

【解决方案1】：

如果您使用的是gem 'bootstrap-sass'，以下是适合我的解决方案。

首先，从bootstrap website 下载引导程序。提取两个图标 .png 文件（glyphicons-halflings.png 和 glyphicons-halflings-white.png）并将它们复制到您的应用图像目录 (app/images) 中。

在您的 custom.css.scss 文件中（根据您的应用，这可能是不同的名称）在您的样式表顶部（在您导入引导程序之前）输入以下内容以覆盖图标图像路径：

 $iconSpritePath: url('/assets/glyphicons-halflings.png');
 $iconWhiteSpritePath: url('/assets/glyphicons-halflings-white.png');

 @import "bootstrap";

【讨论】：

【解决方案2】：

例如使用 Rails 图像助手：

background-image: image-url("glyphicons-halflings.png");

您还可以在 Rails 控制台中检查您的搜索路径：

Rails.application.config.assets.paths

祝你好运！

【讨论】：

gem 的路径是“/Users/myusername/.rvm/gems/ruby-1.9.3-p125/gems/bootstrap-sass-2.0.2/vendor/assets/images”。那么我应该如何在我的 CSS 文件中引用它以使图标正常工作？我尝试将 .png 文件放到我的图像文件夹中，并按照您的建议使用 Rails 图像帮助程序，但这不起作用。

【解决方案3】：

您是否设置了您的资产主机？

https://devcenter.heroku.com/articles/cdn-asset-host-rails31#configuration

【讨论】：

嗨，尼尔，感谢您的建议。是的，我已经设置了资产主机。我的图像和背景在 S3 上都可以正常加载，只是图标没有为我加载。

【解决方案4】：

您是否检查了实际使用的背景图片 URL？当我尝试在我的开发环境中测试 CDN 时，我有同样的行为。结果，不知何故，在 application.css 中使用了错误的存储桶

【讨论】：

【解决方案5】：

对于不使用 bootstrap-sass gem 的任何人，我终于通过将默认 bootstrap css 文件扩展名更改为 scss 并编辑以下代码以使用 rails asset_url 方法来工作。只需在代码中搜索 @font-face 并尝试一下。

@font-face {
 font-family: 'Glyphicons Halflings';

 src: asset_url('glyphicons-halflings-regular.eot');
 src: asset_url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), asset_url('glyphicons-halflings-regular.woff') format('woff'), asset_url('glyphicons-halflings-regular.ttf') format('truetype'), asset_url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

提交并推送到heroku。为我工作。希望这可以帮助某人

【讨论】：