Ruby on rails 4 引导3图标未显示在Heroku上

我已经看到了很多关于这个问题的问题和解决方案，但是没有一个对我有效。字形图标在本地工作得很好，但在桌面浏览器的Heroku上显示为方框

我是这样使用它们的：

<span class="glyphicon glyphicon-trash"></span>

在尝试其他修复程序后，我目前将production.rb设置为这样：

config.serve_static_assets = true
config.assets.compress = true
config.assets.compile = true
config.assets.digest = true

My application.rb文件包含以下内容：

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

# Enable the asset pipeline
config.assets.enabled = true

# Version of your assets, change this if you want to expire all your assets
config.assets.version = '1.0'

# Required for Devise on Heroku
config.assets.initialize_on_precompile = false

config.autoload_paths += %W(#{config.root}/app/models/ckeditor)
config.assets.precompile += Ckeditor.assets
config.assets.precompile += %w(ckeditor/*)
config.assets.precompile += %w( .svg .eot .woff .ttf )
config.assets.precompile += [ 'styles.css.scss']
config.assets.precompile += [
    'glyphicons-halflings.png',
    'glyphicons-halflings-white.png'
  ]

及

我已经尝试了这么多的修复，以至于我现在设置的东西可能是错误的。当地一切都很好。我还有一个问题，文本对齐：中心没有从我的CSS文件推送到heroku。我将把它作为一个单独的问题发布，但我会提到它，以防它与资产管道相关

这是我在应用程序中加载样式表的方式：

 <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>

在my application.css.scss中：

*= require_self
*= require_tree .
*= require font-awesome

在my styles.css.scss中

@import 'bootstrap';
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
@import 'font-awesome';


@font-face {
  font-family: 'Glyphicons Halflings';
  src: font-path('glyphicons-halflings-regular.eot');
  src: font-path('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
    font-path('glyphicons-halflings-regular.woff') format('woff'), 
    font-path('glyphicons-halflings-regular.ttf') format('truetype'), 
    font-path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

以下是Chrome的错误：

跨源资源共享策略已阻止加载来自源“”的字体：请求的资源上不存在“访问控制允许源”标题。因此，不允许访问源“”。响应的HTTP状态代码为404。 jquery-91eecca5c0fff73b540ae82e1b1833c8.js:3581获取jquery-91eecca5c0fff73b540ae82e1b1833c8.js:3581（匿名函数）jquery-91eecca5c0fff73b540ae82e1b1833c8.js:3120 firejquery-91eecca5c0fff73b540ae82e1b1833c8.js:3232 self.fireithjquery-91eecca5c0fff73b540ae82e1833c8.js:3444 jquery.extend.readyjquery-91eecca5c0fff73b540ae82b1833c8.js:3475已完成 （索引）：跨源资源共享策略已阻止加载来自源“”的1种字体：请求的资源上不存在“访问控制允许源”标题。因此，不允许访问源“”。响应的HTTP状态代码为404。 （索引）：1获取

更新：我评论了

# config.action_controller.asset_host = "http://thetens.herokuapp.com"

现在我只得到两个错误：

获取jquery-6156CFCA88EFB694AC4FAC3D8CEF9C4.js:3581（匿名函数）jquery-6156CFCA88EFB694AC4FAC3D8CEF9C4.js:3120 firejquery-6156CFCA88EFB694AC4FAC3D8CEF9C4.js:3232 self.fireithjquery-6156CFCA88EFB694AC4FAC3D8CEF9C4.js:3444 jquery.extend.readyjquery-6156CFCA88EFB694AC4FAC3D8CEF9C4.js:3475已完成

---

（索引）：1 GET

你必须绝对链接到字体，如

  @import 'bootstrap';
  @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
  @import 'font-awesome';


  @font-face {
      font-family: 'Glyphicons Halflings';
      src: font-path('/assets/fonts/glyphicons-halflings-regular.eot');
      src: font-path('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
font-path('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'), 
font-path('/assets/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
font-path('/assets/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
  }

---

标记并确保heroku中的字体链接正确，这对我来说是可行的：

@import“引导链轮” @导入“引导”

---

我希望这能帮助你！：）

在heroku上有相同的问题，这是由跨源资源共享引起的。这就是为什么大多数配置解决方案不起作用

我的解决办法是：

将所有资产移动到S3存储桶（）

在bucket（）上配置cors[重要信息]

---

查看样式表，确保绝对路径确保它们正在链接properly@MZaragoza我的CSS通常工作得很好，而且所有东西都在本地工作，所以有可能它们没有正确链接吗？是的，请确保在称为字体的CSS文件中，它以“/assets/…”开头@MZaragoza I在上面添加了样式表信息。我只是用样式表链接标签加载它。关于路径，我还缺少更多的信息吗？你能发布*=要求字体中的内容吗？你粘贴的答案与我在上面问题中的代码不一样吗？抱歉，如果我遗漏了一些内容。请仔细查看以“/assets”开头的字体路径。这必须是从中加载字体面的绝对路径。我明白了，抱歉。我改变了这些路径，但没有解决它。我将添加上面Chrome中显示的404。我必须询问字体的路径是什么。应用程序的根目录它们位于/vendor/assets/fonts中。我尝试将上面的路径更改为“/assets/fonts/”和“/vendor/assets/fonts/”，但都不起作用

*= require_self
*= require_tree .
*= require font-awesome

@import 'bootstrap';
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
@import 'font-awesome';


@font-face {
  font-family: 'Glyphicons Halflings';
  src: font-path('glyphicons-halflings-regular.eot');
  src: font-path('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
    font-path('glyphicons-halflings-regular.woff') format('woff'), 
    font-path('glyphicons-halflings-regular.ttf') format('truetype'), 
    font-path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

# config.action_controller.asset_host = "http://thetens.herokuapp.com"

  @import 'bootstrap';
  @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
  @import 'font-awesome';


  @font-face {
      font-family: 'Glyphicons Halflings';
      src: font-path('/assets/fonts/glyphicons-halflings-regular.eot');
      src: font-path('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
font-path('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'), 
font-path('/assets/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
font-path('/assets/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
  }