Ruby on Rails Bootstrap Glyphicons ne fonctionne pas

J’ai ajouté le bootstrap à mon site. Voici la structure que j’utilise. (Je ne peux en aucun cas 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!

Novembre 2015 EDIT: Je recommande ce joyau: https://github.com/twbs/bootstrap-sass Il est activement maintenu par la communauté Bootstrap et fonctionne vraiment bien avec Ruby on Rails.

J’avais un problème très similaire à toi 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é!

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

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

Pour moi en tant qu’utilisateur de twitter-bootstrap-rails :

Merci de prendre le post @ GitHub

Ajout de 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.

J’avais aussi du mal à faire fonctionner le boostrap3 glyphicon dans les 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'); }` 

au fichier application.css.scss et

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

au fichier application.rb.

Je pense que vous pourriez avoir un problème avec le pipeline d’actifs

Vous voulez changer bootstrap.css en bootstrap.css.scss et remplacer ensuite

 @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 (voir 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

 # Precomstack additional assets config.assets.precomstack += %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 poste SO pour un problème similaire

J'espère que cela t'aides

Les icons Bootstrap 3 ressemblent à ceci:

  

alors que Bootstrap 2 ressemblait à ceci:

  

Si le code que vous utilisez n’est pas à jour (recherchez une twig b3), vous devrez peut-être bifurquer et modifier l’icône qui s’appelle vous-même.

Apparemment, Chrome a été cassé pendant des mois à ce sujet.

Cela a fonctionné pour moi quand je l’ai mis 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"); 

Selon Bootstrap 3, les glyphicons ne fonctionnent pas , il y a un bogue avec le personnaliseur Bootstrap qui perturbe les fonts de glyphicon. J’ai eu le même problème, mais j’ai pu résoudre ce problème en téléchargeant l’intégralité du bootstrap depuis http://getbootstrap.com/ , puis en copiant les fichiers de police au bon endroit.

Dans Rails 4, avec sass, Bootstrap 3.2.0 et le gem bootstrap-sass, utilisez:

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

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é à cela.

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

Vous pouvez également 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'); } 

Il vous suffit de convertir votre fichier your_css.css en votre_css.css.erb

Vous pouvez copier tous les fichiers de fonts bootstrap sur public / font et cela fonctionnera. Pas besoin d’importer ou de modifier l’application.rb.

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’expliquent les documents. Ensuite, importez ou collez vos fichiers modifiés.

Dans un projet php, le glyphe ne fonctionnait pas, je téléchargeais le zip bootstrap classique et j’extrayais les fichiers glyphes pour les remplacer dans le projet. Dans mes souvenirs, le bogue apparaît lorsque vous générez un style de démarrage personnalisé à partir de leur site (la source du bogue peut être erronée).

J’espère que cela t’aides!

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

Assurez-vous d’avoir défini

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

Et append des fonts à la liste de précompilation

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

Dans mon cas, j’ai utilisé cette , que j’ai prise depuis le site officiel de Bootstrap et que je n’ai rien vu. Mais au lieu de cela, il est nécessaire d’utiliser ce