Я видел много вопросов и решений по этому вопросу на SO, но никто не работал для меня. Glyphicons работают отлично на месте, но показывают как коробки на Heroku из настольных браузеров.Bootstrap 3 Глификоны, не показывающиеся на Heroku
Я их помощью, как это:
<span class="glyphicon glyphicon-trash"></span>
Это мой 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
Я в настоящее время имеют 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'
]
Я также попытался запустить
bundle exec rake assets:precompile
и
bundle exec rake assets:precompile RAILS_ENV=production
Я попытался так много исправлений, что-то я ставлю перед собой сейчас может быть неправильным. Все отлично работает на местном уровне. У меня также есть проблема, когда text-align: center не выталкивается героем из моего CSS-файла. Я отправлю это как отдельную проблему, но я упоминаю об этом в случае, если это связанная проблема с конвейером активов.
Это, как я загрузить Teh таблицы стилей в приложении:
<%= 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
в мои стили.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://thetens.herokuapp.com» был заблокирован нагружении политики Cross-Origin совместного использования ресурсов: заголовок Нет «Access-Control-Allow-Origin» присутствует на запрошенный ресурс , Происхождение 'http://www.thetens.us', следовательно, не допускается. Ответ был 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 завершено (index): 1 Шрифт от начала 'http://thetens.herokuapp.com' был заблокирован от загрузки по Cross-Origin Policy Sharing policy: Нет заголовка Access-Control-Allow-Origin присутствует на запрошенном ресурсе. Происхождение 'http://www.thetens.us', следовательно, не допускается. В ответе был код статуса HTTP 404. (индекс): 1 GET http://thetens.herokuapp.com/fonts/glyphicons-halflings-regular.ttf
Update: Я закомментирована
# 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
Посмотрите на таблицу стилей, чтобы убедиться, что абсолютное путь убедитесь, что они правильно связаны – MZaragoza
@MZaragoza Мои CSS отлично работают в целом, и все работает локально, так что возможно, что они не связаны должным образом? –
Да, убедитесь, что в файле css, который вы называете шрифтами, он начинается с «/ assets/...» – MZaragoza