Question

我已经在SO上看到了很多关于这个问题的问题和解决方案，但没有一个对我有用。 Glyphicons在本地工作很棒，但在桌面浏览器上显示为Heroku上的框。

我这样使用它们：

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

这是我的宝石文件：

source 'https://rubygems.org'
ruby '2.0.0'

gem 'rails', '4.1.8'
gem 'sass-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails', '~> 3.1.0'
gem 'turbolinks'
gem 'jquery-turbolinks'
gem 'jbuilder', '~> 2.0.2'
gem 'bootstrap-sass', '~> 3.1.1.0'
gem 'twitter-bootstrap-rails', '~> 3.2.0'
gem 'devise', '~> 3.2.2'
gem 'simple_form'
gem "paperclip", "~> 4.2.0"
gem 'aws-sdk', '~> 1.32.0'
gem 'will_paginate', '3.0.7'
gem 'will_paginate-bootstrap'
gem "friendly_id", "~> 5.0.2"
gem 'faker', '1.2.0'
gem 'auto_html'
gem 'protected_attributes'
gem 'ckeditor', '~> 4.0.11'
gem 'font-awesome-rails'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

group :production do
    gem 'pg'
    gem 'rails_12factor'
end

group :development, :test do    
  gem 'sqlite3'
end

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

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

我的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'
  ]

我也尝试过运行

bundle exec rake assets:precompile

和

bundle exec rake assets:precompile RAILS_ENV=production

我已经尝试了很多修复，我现在设置的东西可能是错的。一切都在当地很有效。我还有一个问题，即text-align：center没有从我的CSS文件推送到heroku。我将此作为一个单独的问题发布，但我提到它是因为它与资产管道有关。

这就是我在应用中加载样式表的方法：

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

这些是我的样式表：

application.css.scss
pages.css.scss
posts.css.scss
scaffolds.css.scss
styles.css.scss
users.css.scss

在我的application.css.scss中：

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

在我的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的错误：

来自原点的字体＆＃39; http://thetens.herokuapp.com＆＃39;已被跨源资源共享策略阻止加载：No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://www.thetens.us＆＃39;因此不允许访问。响应具有HTTP状态代码404。的jquery-91eecca5c0fff73b540ae82e1b1833c8.js：3581 GET http://thetens.herokuapp.com/fonts/glyphicons-halflings-regular.woff的jquery-91eecca5c0fff73b540ae82e1b1833c8.js：3581（匿名功能）的jquery-91eecca5c0fff73b540ae82e1b1833c8.js：3120 firejquery-91eecca5c0fff73b540ae82e1b1833c8.js：3232 self.fireWithjquery-91eecca5c0fff73b540ae82e1b1833c8.js：3444 jQuery.extend .readyjquery-91eecca5c0fff73b540ae82e1b1833c8.js：3475已完成（索引）：1来自原点的字体＆＃39; http://thetens.herokuapp.com＆＃39;已被跨源资源共享策略阻止加载：No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://www.thetens.us＆＃39;因此不允许访问。响应具有HTTP状态代码404。（索引）：1 GET http://thetens.herokuapp.com/fonts/glyphicons-halflings-regular.ttf

更新：我注释掉了

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

现在我只收到两个错误：

GET http://www.thetens.us/fonts/glyphicons-halflings-regular.woff的jquery-6156cfcaa88efb694ac4fac3d8cef9c4.js：3581（匿名功能）的jquery-6156cfcaa88efb694ac4fac3d8cef9c4.js：3120 firejquery-6156cfcaa88efb694ac4fac3d8cef9c4.js：3232 self.fireWithjquery-6156cfcaa88efb694ac4fac3d8cef9c4.js：3444 jQuery.extend.readyjquery-6156cfcaa88efb694ac4fac3d8cef9c4 .js：3475完成（索引）：1 GET http://www.thetens.us/fonts/glyphicons-halflings-regular.ttf

Answer 1

对我来说，这就解决了：

@import＆＃34; bootstrap-sprockets＆＃34 ;; @import＆＃34; bootstrap＆＃34 ;;

我希望这有助于你！：）

Answer 2

您必须绝对链接到

这样的字体

  @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中正确链接

Answer 3

在heroku上遇到同样的问题，这是由跨源资源共享引起的。这就是为什么大多数配置解决方案都无法正常工作的原因。

我的解决方案是：

将所有资源移至S3存储桶（used asset_sync gem）
存储桶上的configureCORS（CORS）[重要]

Bootstrap 3 Glyphicons没有在Heroku上显示

3 个答案: