Глификоны Ruby on Rails не работают

Ответ 1

November 2015 EDIT: я бы рекомендовал этот камень: https://github.com/twbs/bootstrap-sass Он активно поддерживается сообществом Bootstrap и отлично работает с Ruby on Rails.

У меня была очень похожая проблема, как вы, но я это понял! Найдите эту часть в файле bootstrap.css:

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

и замените ../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');
}

Я надеюсь, что это помогло!

Ответ 2

Если вы используете bootstrap-sass, и у вас есть эта проблема, попробуйте импортировать bootstrap, как это, в один из ваших scss файлов. Если вы используете sass, просто преобразуйте синтаксис:

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

Ответ 3

Для меня как пользователя twitter-bootstrap-rails:

Спасибо за сообщение @GitHub

Добавление этого:

/* Override Bootstrap 3 font locations */
@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');
}

для моего application.css исправлена ​​проблема.

Надеюсь быть полезным.

Ответ 4

Я также изо всех сил пытался сделать glyphicon boostrap3 в рельсах 4. Я решил это, добавив

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

в файл application.css.scss и

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

в файл application.rb.

Ответ 5

Я думаю, что у вас может возникнуть проблема с конвейером

Вы хотите изменить bootstrap.css на bootstrap.css.scss, а затем заменить там, где он использует

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

с font-path (смотрите раздел 2.3.2 - CSS и Sass)

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

Также в config/environments/production.rb

# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )

В вашем config/application.rb

# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

Отъезд другой SO post для аналогичной проблемы

Надеюсь, что это поможет

Ответ 6

Значки Bootstrap 3 выглядят следующим образом:

<i class="glyphicon glyphicon-indent-right"></i>

тогда как Bootstrap 2 выглядел следующим образом:

<i class="icon-indent-right"></i>

Если код, который вы используете, не обновляется (проверьте наличие ветки b3), тогда вам может потребоваться форк и изменить имена значков сами.

Ответ 7

По-видимому, Chrome был поврежден в течение нескольких месяцев после этой проблемы.

Это сработало для меня, когда я положил его в начало моего файла customization_css.css.scss

@import 'bootstrap-sprockets';
@import 'bootstrap';
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

Ответ 8

Согласно Bootstrap 3 Glyphicons не работают, есть ошибка с настройкой Bootstrap, которая испортила шрифты глификона. У меня была такая же проблема, но я смог ее исправить, загрузив всю загрузку из http://getbootstrap.com/, а затем скопировав файлы шрифтов в нужное место.

Ответ 9

В Rails 4 с помощью sass, Bootstrap 3.2.0 и самозарядного самоцвета используйте:

@import "bootstrap";
@import "bootstrap/theme";

Ответ 10

Вы также можете попробовать следующее:

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('<%= asset_path("glyphicons-halflings-regular.eot") %>');
  src: url('<%= asset_path("glyphicons-halflings-regular.eot?#iefix") %>') format('embedded-opentype'), url('<%= asset_path("glyphicons-halflings-regular.woff2") %>') format('woff2'), url('<%= asset_path("glyphicons-halflings-regular.woff") %>') format('woff'), url('<%= asset_path("glyphicons-halflings-regular.ttf") %>') format('truetype'), url('<%= asset_path("glyphicons-halflings-regular.svg#glyphicons_halflingsregular") %>') format('svg');
}

Вам просто нужно преобразовать ваш файл your_css.css в ваш_css.css.erb

Ответ 11

Я попробовал с предлагаемым решением, и это не сработало для меня, вот общее решение, которое поможет вам устранить любую проблему, связанную с этим, которую вы могли бы иметь.

Вот результирующее определение лица шрифта с помощью bootstrap-sass:

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

Ответ 12

Вы можете скопировать все файлы шрифтов bootstrap в общедоступные/шрифты, и это сработает. Не требуется импорт или изменения в application.rb.

Ответ 13

Когда я использую bootstrap в своих приложениях с рельсами, я использую самоцестер bootstrap-sass.

https://github.com/thomas-mcdonald/bootstrap-sass

Вы можете переопределить его. Просто импортируйте его, как объясняют документы. Затем импортируйте или вставьте измененные файлы.

В php-проекте глиф не работал, я загружал классический загрузочный zip и я извлекал глиф файлы для их замены в проекте. В моих воспоминаниях ошибка появляется, когда вы создаете пользовательский стиль начальной загрузки с их сайта (источник ошибки может быть неправильным).

Надеюсь, это поможет!

Ответ 14

В моем файле index.html.slim я заменил span.glyphicon.glyphicon-calendar на span.fa.fa-calendar, и он сработал.

Ответ 15

Убедитесь, что вы установили

# config/environments/production.rb
config.assets.compile = true

И добавьте шрифты в список прекомпиляции

# config/initializers/assets.rb
config.assets.precompile += %w(*.eot *.svg *.ttf *.woff *.woff2)

Ответ 16

В моем случае я использовал этот <i class="icon-plus"></i>, который я взял с официального сайта Bootstrap и ничего не видел. Но вместо этого необходимо использовать этот <i class="glyphicon glyphicon-plus"></i>

Ответ 17

Если у вас есть файлы glyphicons в app/assets/fonts (если вы этого не сделаете, вы можете загрузить их из bootstrap-saas repo), создайте app/assets/stylesheets/fonts.scss и добавьте следующее:

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