web-dev-qa-db-fra.com

Les glyphiques Bootstrap de Ruby on Rails ne fonctionnent pas

J'ai ajouté bootstrap sur mon site. Voici la structure que j'utilise. (Je ne peux absolument pas supprimer le fichier bootstrap.css car je l'ai modifié à mon goût).

>app
>>assets
>>>fonts
>>>>4 glypicons icon files.
>>>images
>>>>N/A
>>>javascripts
>>>>Bootstrap.js (Jquery is installed in a gem)
>>>stylesheets
>>>>Bootstrap.css

Tout est importé correctement, mais le problème est que les glyphicons ne fonctionnent pas et j'en ai besoin!

ruby-on-railstwitter-bootstrap
47
user3024194

Novembre 2015 EDIT: Je recommanderais ce joyau: https://github.com/twbs/bootstrap-sass Il est activement mis à jour par la communauté Bootstrap et fonctionne très bien avec Ruby on Rails.

J'avais un problème très similaire à vous mais je le découvre! Trouvez cette partie dans votre fichier 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');
}

et remplacez ../fonts/ par /assets. Voici à quoi ressemblera votre code final.

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

J'espère que cela a aidé!

100
nahtnam

Si vous utilisez bootstrap-sass et que vous avez ce problème, essayez d'importer bootstrap de la sorte dans l'un de vos fichiers scss. Si vous utilisez sass, convertissez simplement la syntaxe:

@import "bootstrap-sprockets";
@import "bootstrap";
44
vladCovaliov

Pour moi en tant qu'utilisateur Twitter-bootstrap-Rails:

Merci de prendre le post @ GitHub 

Ajoutant ceci:

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

à mon application.css résolu le problème.

J'espère être utile.

36
Langusten Gustel

Je me suis également efforcé de faire fonctionner boostly glyphicon dans Rails 4 . Je l'ai résolu en ajoutant 

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

vers application.css.scss fichier et 

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

dans le fichier application.rb.

30
jbmyid

Je pense que vous pourriez avoir un problème avec le portefeuille d'actifs

Vous voulez changer bootstrap.css en bootstrap.css.scss et ensuite remplacer où il utilise

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

avec font-path (consultez la section 2.3.2 - CSS et 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');
}

Aussi dans votre config/environments/production.rb

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

Dans votre config/application.rb

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

Découvrez un autre SO post pour un problème similaire

J'espère que cela t'aides

10
user2262149

Les icônes de Bootstrap 3 ressemblent à ceci:

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

alors que Bootstrap 2 ressemblait à ceci:

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

Si le code que vous utilisez n'est pas à jour (recherchez une branche b3), vous devrez peut-être créer une fourchette et modifier les noms des icônes.

5
Danny

Apparemment, Chrome est en panne depuis des mois sur ce problème.

Cela a fonctionné pour moi lorsque je l'ai placé en haut de mon fichier customization_css.css.scss 

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

Selon Bootstrap 3 Les glyphiques ne fonctionnent pas , il existe un bogue avec le personnaliseur Bootstrap qui gâche les polices glyphicon. J'avais le même problème, mais j'ai pu résoudre le problème en téléchargeant l'intégralité du fichier bootstrap à partir de http://getbootstrap.com/ , puis en copiant les fichiers de police à l'emplacement correct.

2
LeoPleurodon

J'ai essayé avec la solution suggérée et cela n'a pas fonctionné pour moi. Voici une solution générique qui vous aide à résoudre tout problème lié à cette situation.

Voici la définition de la police obtenue avec 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');
}
2
juanpastas

Vous pouvez aussi essayer ceci: 

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

Vous devez simplement convertir votre fichier your_css.css en your_css.css.erb.

2
Ravi Kashyap

Vous pouvez copier tous les fichiers de polices d'amorçage sur public/fonts et cela fonctionnera. Pas besoin d'importations ou de modifications dans l'application.rb.

1
Danut Codrescu

Dans Rails 4, avec sass, Bootstrap 3.2.0 et la gemme bootstrap-sass, utilisez:

@import "bootstrap";
@import "bootstrap/theme";
1
Marc Durdin

Dans mon fichier index.html.slim, j'ai remplacé span.glyphicon.glyphicon-calendar par span.fa.fa-calendar et cela a fonctionné.

0
feng

Assurez-vous d'avoir réglé

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

Et ajouter des polices à la liste de précompilation

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

Dans mon cas, j'ai utilisé ce <i class="icon-plus"></i>, que j'ai pris sur le site officiel de Bootstrap et qui n'a rien Mais au lieu de cela, il est nécessaire d’utiliser ce <i class="glyphicon glyphicon-plus"></i>

0
Andrey

Lorsque j'utilise bootstrap dans mes applications Rails, j'utilise la gemme bootstrap-sass.

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

Vous pouvez le remplacer. Importez-le simplement comme l'explique la documentation. Puis importez ou collez vos fichiers modifiés.

Dans un projet php, le glyphe ne fonctionnait pas, je télécharge le bootstrap classique Zip et j'extrais les fichiers glyphes pour les remplacer dans le projet. Dans mes souvenirs, le bogue apparaît lorsque vous générez un style d'amorçage personnalisé à partir de leur site (la source du bogue peut être fausse).

J'espère que cela t'aides!

0
coding addicted

Si vous avez les fichiers glyphicons dans app/assets/fonts (sinon, vous pouvez les télécharger à partir du répertoire bootstrap-saas repo ), créez app/assets/stylesheets/fonts.scss et ajoutez les éléments suivants:

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