Bootstrap 3 Glyphicons not showing on Heroku

Question

I've seen many questions and solutions for this issue on SO, but none have worked for me. The Glyphicons work great locally, but show as boxes on Heroku from desktop browsers.

I'm using them like this:

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

This is my gemfile:

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

I currently have production.rb set like this after trying other fixes:

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

My application.rb file has the following:

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

I have also tried running

bundle exec rake assets:precompile

and

bundle exec rake assets:precompile RAILS_ENV=production

I have tried so many fixes, that something I have set now might be wrong. Everything works great locally. I also have an issue where a text-align: center is not being pushed to heroku from my CSS file. I'll post that as a separate issue, but I mention it in case it's a related issue with the asset pipeline.

This is how I load teh stylesheets in the app:

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

These are my stylesheets:

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

in my application.css.scss:

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

in 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');
}

Here's the error from Chrome:

Font from origin 'http://thetens.herokuapp.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.thetens.us' is therefore not allowed access. The response had HTTP status code 404. jquery-91eecca5c0fff73b540ae82e1b1833c8.js:3581 GET http://thetens.herokuapp.com/fonts/glyphicons-halflings-regular.woff jquery-91eecca5c0fff73b540ae82e1b1833c8.js:3581 (anonymous function)jquery-91eecca5c0fff73b540ae82e1b1833c8.js:3120 firejquery-91eecca5c0fff73b540ae82e1b1833c8.js:3232 self.fireWithjquery-91eecca5c0fff73b540ae82e1b1833c8.js:3444 jQuery.extend.readyjquery-91eecca5c0fff73b540ae82e1b1833c8.js:3475 completed (index):1 Font from origin 'http://thetens.herokuapp.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.thetens.us' is therefore not allowed access. The response had HTTP status code 404. (index):1 GET http://thetens.herokuapp.com/fonts/glyphicons-halflings-regular.ttf

Update: I commented out

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

and now I only get two errors:

GET http://www.thetens.us/fonts/glyphicons-halflings-regular.woff jquery-6156cfcaa88efb694ac4fac3d8cef9c4.js:3581 (anonymous function)jquery-6156cfcaa88efb694ac4fac3d8cef9c4.js:3120 firejquery-6156cfcaa88efb694ac4fac3d8cef9c4.js:3232 self.fireWithjquery-6156cfcaa88efb694ac4fac3d8cef9c4.js:3444 jQuery.extend.readyjquery-6156cfcaa88efb694ac4fac3d8cef9c4.js:3475 completed (index):1 GET http://www.thetens.us/fonts/glyphicons-halflings-regular.ttf

Answer 1

Had the same problem on heroku and this is caused by Cross-Origin Resource Sharing. That's why most config solutions don't work.

my solution was:

1. move all assets to S3 bucket (used asset_sync gem)
2. configureCORS on bucket (CORS) [IMPORTANT]

Answer 2

For me this worked out:

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

I hope this helps you to! :)

Answer 3

You have to link absolutely to the font like

  @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');
  }

Mark sure that the fonts are link properly in heroku