All geek questions in one place

Bootstrap 3 Glyphics not showing on Heroku

I saw a lot of questions and solutions for this problem on SO, but no one worked for me. The Glyphicons work fine in place, but show how boxes on Heroku come from desktop browsers.

I use them as follows:

<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, as well as after other corrections:

 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 also tried to run

 bundle exec rake assets:precompile

and

 bundle exec rake assets:precompile RAILS_ENV=production

I tried so many fixes that what I installed now may be wrong. Everything works great locally. I also have a problem when text-align: center is not popped by the hero from my CSS file. I will post this as a separate issue, but I mention it in case it is related to an asset pipeline problem.

This is how I load the stylesheets in the application:

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

These are my style sheets:

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

in my application 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:

The font from the source http://thetens.herokuapp.com 'was blocked from downloading under the Cross-Origin resource sharing policy: the header "Access-Control-Allow-Origin" is not present on the requested resource. Origin ' http://www.thetens.us ' is therefore not allowed. The response was a status code HTTP 404. JQuery-91eecca5c0fff73b540ae82e1b1833c8.js: 3581 the GET http://thetens.herokuapp.com/fonts/glyphicons-halflings-regular.woff the JQuery-91eecca5c0fff73b540ae82e1b1833c8.js: 3581 (anonymous function) JQuery-91eecca5c0fff73b540ae82e1b1833c8. js: 3120 firejquery-91eecca5c0fff73b540ae82e1b1833c8.js: 3232 self.fireWithjquery-91eecca5c0fff73b540ae82e1b1833c8.js: 3444 jQuery.extend.readyjquery-91eecca5c0fffjejbjtjtjbbjtfjbjbfjbj.jpg was blocked from loading 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. The response was an HTTP status code 404. (index): 1 GET http://thetens.herokuapp.com/fonts/glyphicons-halflings-regular.ttf

Update: I commented

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

and now I get two errors:

The GET http://www.thetens.us/fonts/glyphicons-halflings-regular.woff the 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

+5
source share
3 answers

For me it turned out:

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

Hope this helps! :)

+1
source

You need to bind absolutely to the font, for example

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

Note that fonts are correctly linked in heroku

0
source

There was the same problem with the hero, and this was caused by the sharing of Cross-Origin resources. That is why most configuration solutions do not work.

My solution was:

0
source

Source: https://habr.com/ru/post/1210223/

More articles:


All Articles