Я добавил бутстрап на свой сайт. Вот структура, которую я использую. (Я не могу удалить файл bootstrap.css, так как он изменил его по своему вкусу).
>app
>>assets
>>>fonts
>>>>4 glypicons icon files.
>>>images
>>>>N/A
>>>javascripts
>>>>Bootstrap.js (Jquery is installed in a gem)
>>>stylesheets
>>>>Bootstrap.css
Все импортировано правильно, но проблема в том, что глификон arent работает, и я нуждаюсь в них!
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');
}
Я надеюсь, что это помогло!
Если вы используете bootstrap-sass, и у вас есть эта проблема, попробуйте импортировать bootstrap, как это, в один из ваших scss файлов. Если вы используете sass, просто преобразуйте синтаксис:
@import "bootstrap-sprockets";
@import "bootstrap";
Для меня как пользователя 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 исправлена проблема.
Надеюсь быть полезным.
Я также изо всех сил пытался сделать 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.
Я думаю, что у вас может возникнуть проблема с конвейером
Вы хотите изменить 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 для аналогичной проблемы
Надеюсь, что это поможет
Значки Bootstrap 3 выглядят следующим образом:
<i class="glyphicon glyphicon-indent-right"></i>
тогда как Bootstrap 2 выглядел следующим образом:
<i class="icon-indent-right"></i>
Если код, который вы используете, не обновляется (проверьте наличие ветки b3), тогда вам может потребоваться форк и изменить имена значков сами.
По-видимому, Chrome был поврежден в течение нескольких месяцев после этой проблемы.
Это сработало для меня, когда я положил его в начало моего файла customization_css.css.scss
@import 'bootstrap-sprockets';
@import 'bootstrap';
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
Согласно Bootstrap 3 Glyphicons не работают, есть ошибка с настройкой Bootstrap, которая испортила шрифты глификона. У меня была такая же проблема, но я смог ее исправить, загрузив всю загрузку из http://getbootstrap.com/, а затем скопировав файлы шрифтов в нужное место.
В Rails 4 с помощью sass, Bootstrap 3.2.0 и самозарядного самоцвета используйте:
@import "bootstrap";
@import "bootstrap/theme";
Вы также можете попробовать следующее:
@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
Я попробовал с предлагаемым решением, и это не сработало для меня, вот общее решение, которое поможет вам устранить любую проблему, связанную с этим, которую вы могли бы иметь.
Вот результирующее определение лица шрифта с помощью 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');
}
Вы можете скопировать все файлы шрифтов bootstrap в общедоступные/шрифты, и это сработает. Не требуется импорт или изменения в application.rb.
Когда я использую bootstrap в своих приложениях с рельсами, я использую самоцестер bootstrap-sass.
https://github.com/thomas-mcdonald/bootstrap-sass
Вы можете переопределить его. Просто импортируйте его, как объясняют документы. Затем импортируйте или вставьте измененные файлы.
В php-проекте глиф не работал, я загружал классический загрузочный zip и я извлекал глиф файлы для их замены в проекте. В моих воспоминаниях ошибка появляется, когда вы создаете пользовательский стиль начальной загрузки с их сайта (источник ошибки может быть неправильным).
Надеюсь, это поможет!
В моем файле index.html.slim я заменил span.glyphicon.glyphicon-calendar на span.fa.fa-calendar, и он сработал.
Убедитесь, что вы установили
# config/environments/production.rb
config.assets.compile = true
И добавьте шрифты в список прекомпиляции
# config/initializers/assets.rb
config.assets.precompile += %w(*.eot *.svg *.ttf *.woff *.woff2)
В моем случае я использовал этот <i class="icon-plus"></i>, который я взял с официального сайта Bootstrap и ничего не видел. Но вместо этого необходимо использовать этот <i class="glyphicon glyphicon-plus"></i>
Если у вас есть файлы 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');
}