Bootstrap 3 + Rails 4 - Некоторые глификоны не работают

Ответ 1

У меня была та же проблема и я нашел решение. Полный кредит идет на Эрик Минкель, который написал подробное сообщение в блоге по этой теме. Я бы настоятельно предложил прочитать его для дальнейших рассуждений.

• Измените app/assets/stylesheets/application.css, добавив:

  *= require bootstrap
  

• Измените app/assets/javascripts/application.js, добавив:

  //= require bootstrap
  

• В config/application.rb добавьте следующее после class Application < Rails::Application. Он должен выглядеть следующим образом:

  class Application < Rails::Application
      config.assets.paths << "#{Rails}/vendor/assets/fonts"
  

• В терминале скомпилируйте свои активы, выполнив:

  rake assets:precompile RAILS_ENV=development
  

• Отредактируйте файл bootstrap.css, изменив расположение ресурсов @font-face с ../fonts/ на /assets/. Он должен выглядеть следующим образом:

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

Вы закончили. Просто перезапустите с помощью rails s и появятся глификоны.

Ответ 2

Использование Jus:

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

В вашем файле scss или sass. "bootstrap-sprockets" требуется для исправления изображения и шрифта.

Ответ 3

У меня была такая же проблема. Решено путем добавления:

@import "bootstrap-sprockets";

над существующей строкой:

@import 'bootstrap';

в файле/app/stylesheets/bootstrap_and_customisation.css.scss

Ответ 4

У меня была та же проблема. Что-то не так с курсором в бутстрапе. К счастью, это довольно простое решение:

$icon-font-path: 'bootstrap/';

Это исправило это для меня. Должен идти перед импортом bootstrap-sass. Вам может потребоваться изменить значение здесь.

Ответ 5

Обновить. У меня была такая же проблема, и я прошел через шаги, предоставленные ответом №1 от Oddurs. Почему-то это не сработало для меня. И затем я понял, что это связано с файловой структурой в моей общей папке (не знаю, почему моя была другой).

В основном я получил его для работы, добавив "/bootstrap" после "/assets", так как все мои глификоны находились в папке "/bootstrap", по-моему, по умолчанию

Итак, вместо этого:

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

Я сделал это:

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

в application.css. Надеюсь, что кто-то поможет

Ответ 6

Другим решением будет копирование папки шрифтов в общедоступную папку, поэтому у вас есть

public/fonts/glylpicons-.....

Те же самые решения будут работать для шрифтов - удивительный и т.д. Единственным недостатком этого является частое изменение файлов шрифтов: o)

Ответ 7

Если вы используете bootstrap-sass-official, добавьте это, прежде чем импортировать bootstrap:

$icon-font-path: 'bootstrap-sass-official/assets/fonts/bootstrap/';

Ответ 8

Для меня это была проблема с несовместимость версий между bootstrap-sass и sass.

Если вы проверите свой сгенерированный файл application.css, вы увидите, что @font-face обернут внутри @at-root, что является новым объявлением sass, которое не поддерживается версией sass, которую я использовал.

Я обновил sass-rails до 5.0.3 и sass до 3.4.16, и он работал (sass должно быть не менее 3.3).

Ответ 9

У меня была аналогичная проблема, и была обнаружена старая версия загрузочных активов. Благодаря этому сообщению: Rails с Twitter Bootstrap: все еще обслуживает старый актив Я просто побежал rake tmp:clear, и все после этого работало.

Ответ 10

Я использую twitter-bootstrap-rails, а сообщение об ошибке -/assets/twitter/fonts/...

Причиной является то, что в gitter-twitter-bootstrap-rails не включены ресурсы Glyphicons в каталоге поставщика. Я пробовал все решения выше, но никто из них не работал.

Окончательное решение для меня - загрузить zip файл с официального сайта начальной загрузки, разархивировать его, переместить недостающие файлы в каталог public/assets/twitter/fonts. Он работает для моей среды разработки.

Ответ 11

Убедитесь, что ваш gemfile обновлен и что vendor/cache понятен.

Моя проблема вызвана нечетными версиями драгоценных камней, поэтому я запустил bundle update, обновив cache.

Updating files in vendor/cache
Removing outdated .gem files from vendor/cache
  * bullet-4.14.9.gem
  * bootstrap-sass-3.3.5.gem
  * pry-0.10.2.gem
  * webmock-1.21.0.gem
  * sprockets-2.12.4.gem
  * minitest-reporters-1.1.3.gem
  * sass-3.2.19.gem
  * coffee-rails-4.0.1.gem
  * hashie-3.4.2.gem
  * newrelic_rpm-3.13.2.302.gem
  * nprogress-rails-0.1.6.7.gem
  * schema_plus_pg_indexes-0.1.7.gem
  * hike-1.2.3.gem
  * minitest-5.8.1.gem
  * tilt-1.4.1.gem
  * sass-rails-4.0.5.gem
Bundle updated!

Как только я это сделал, для хорошей меры я делаю для других кэшей также очищенными rake assets:clobber и повторно скомпилировал активы RAILS_ENV=production rake assets:precompile.

Затем я перезапустил nginx ../bin/restart и magic.... глификоны появились вместо нечетной квадратной вещи в Firefox на рабочем столе и на iPad. Все вместо человека глификон.

Ответ 12

В то же время возникают проблемы при обновлении до Rails 4.1.4, bootstrap-sass 3.2.0.

Хорошие намеки выше, но никто не помогло.

Эти шаги работали:

• Скопируйте файлы шрифтов в RAILS_ROOT/vendor/assets/fonts/bootstrap/(вам, вероятно, нужно создать каталог)

• Добавьте это в config/application.rb

  config.assets.paths += %W("#{Rails.root}/vendor/assets/fonts")

Не требуется никаких специальных директив или переопределений переменных sass.

Ответ 13

У меня возникли проблемы с просмотром:

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

в моей среде разработки. Работала следующая настройка.

В файле css.scss добавьте:

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

Ответ 14

Если вы устали от магии bootstrap-sass или twitter-bootstrap-rails или хотите остаться с определенной версией бутстрапа, вот что вы можете сделать вручную:

• Загрузите bootstrap из http://getbootstrap.com/, поместите файлы в свой #{Rails.root}/vendor/assets/javascripts

• В файле app/assets/javascripts/application.js напишите //= require 'bootstrap-3.3.6-dist/js/bootstrap.min'

• В файле app/assets/stylesheets/application.css напишите *= require 'bootstrap-3.3.6-dist/css/bootstrap.min'

• Поместите script как это в свой {Rails.root}/bin и настройте его для запуска capistrano при развертывании на производство:

#!/usr/bin/env ruby     

rails_path = File.expand_path('../../', __FILE__)
puts rails_path

`mkdir public/images`

Dir.glob("#{rails_path}/vendor/assets/**/images").each do |directory|
  `cp #{directory}/* #{rails_path}/public/images/`
end

`mkdir public/fonts`

Dir.glob("#{rails_path}/vendor/assets/**/fonts").each do |directory|
  `cp #{directory}/* #{rails_path}/public/fonts/`
end

• Настройте nginx на своих производственных станциях для обслуживания общедоступных/изображений и общедоступных/шрифтов.

        location ~ ^/(assets|images|fonts)/(.*)$ {
            alias /var/www/my_app/current/public/$1/$2;
            gzip on;
            expires max;
            add_header Cache-Control public;
        }

С этого момента каждый раз, когда вы говорите cap production deploy, все ручные вещи будут позабочены.

Ответ 15

Вы можете скопировать все файлы шрифтов bootstrap в общедоступные/шрифты, и он будет работать

Ответ 16

Использование рельсов 4.2.6

Мне пришлось отредактировать config/application.rb

Я добавил эту строку

.
.
.
class Application < Rails::Application
   config.action_controller.relative_url_root = '/myapp'

Теперь шрифты ссылаются относительно значения relative_url_root.

Ответ 17

Добавление следующего в application.scss работало для меня на Rails 5 (после раскомментации @import "bootstrap/glyphicons"; из того же файла [с помощью orats gem])

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

Ответ 18

Я использую angular -ui-bootstrap-rails gem

gem 'angular -ui-bootstrap-rails'

Я загрузил bootstrap и вставил папку шрифтов в папку app/assets

Затем перезапустите сервер rails.