Ruby on Rails Bootstrap Glyphicons ne fonctionne pas

J'ai ajouté bootstrap pour mon site. Voici la structure que j'utilise. (Je ne peux pas que ce soit de supprimer le fichier de bootstrap.fichier css depuis je l'ai modifiée à 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 arent de travail et j'ai besoin d'eux!

InformationsquelleAutor user3024194 | 2013-11-28

ruby-on-rails twitter-bootstrap

100

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

J'ai eu un très même problème que vous, mais je l'ai trouver! Trouver cette partie dans votre fichier d'amorçage.fichier 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 remplacer ../fonts/ avec /assets. C'est ce que votre code final ressemblera.
```
@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é!
- Pas de problème. Si vous le savez, la même chose s'applique avec la police impressionnant. Il suffit de remplacer le ../dir/ avec /actifs!
- Si vous êtes en utilisant le non-compilé Moins ou Sass version, vous pouvez définir la $icon-font-path: "/assets/" variable.
- J'ai suivi une meilleure solution ici: stackoverflow.com/questions/21962775/...
- Bizarre, depuis que mes fichiers sont dans /actif/fonts/ mais il fonctionne
- J'ai essayé avec la solution proposée et il ne fonctionne pas pour moi, ici, est une solution générique qui vous aide à résoudre tout problème lié à ce que vous pourriez avoir stackoverflow.com/a/40898227/1197775
InformationsquelleAutor nahtnam
44

Si vous êtes en utilisant bootstrap-sass et vous avez ce problème essayez d'importer des fichiers d'amorce de ce genre dans un de vos fichiers scss. Si vous utilisez sass, il suffit de convertir la syntaxe:
```
@import "bootstrap-sprockets";
@import "bootstrap";
```
- Cela a fonctionné pour moi. Pouvez-vous expliquer pourquoi cela est nécessaire?
- Je suis en utilisant bootstrap-sass, mais je n'ai pas de sass autres fichiers scss. Où dois-je placer ce? Il ne fonctionne pas dans les fichiers scss.
- J'ai pensé à elle. Ils devaient être dans les citations par des points-virgules à la fin des lignes. J'ai remarqué un changement de comportement dans le site par la suite.
- Il est mentionné ici qu'il doit être importé pour les icônes à travailler: github.com/twbs/bootstrap-sass#a-ruby-on-rails
- boom! réponse correcte.
- certainement la réponse correcte pour les rails 4+
- confirmé, c'est la bonne réponse.
- Yup, qui a travaillé comme un charme!
- Dang. Ouais, c'était mon problème. C'était assez stupide de moi aussi, depuis bootstrap-sassla documentation indique clairement que vous avez besoin d'importer des bootstrap-sprockets avant boostrap, et je me souviens même de la lecture, mais pour une raison que je ne l'ai pas dans mon code. Eh bien... vivre et d'apprendre, je suppose.
- Cela fonctionne vraiment!
InformationsquelleAutor vladCovaliov
36

Pour moi comme un twitter-bootstrap-rails utilisateur:

Merci de prendre le post de @ GitHub

En 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.

Espère être utile.
- cela a également travaillé pour moi! merci beaucoup
- Cela a fonctionné pour moi aussi. Je n'ai aucune idée de pourquoi 🙂
- cela a fonctionné pour moi. Je vous remercie beaucoup.
- A travaillé pour moi dans les Rails 4, merci. Il y a un commentaire dans bootstrap_and_overrides.css.moins, pour permettre glyphicons, mais ça ne fonctionne pas 🙁
- Merci!! J'ai eu du mal avec ça pendant des heures
- cela fonctionne sur le localhost mais pas heroku
- Cela a également travaillé pour moi sur localhost mais pas sur Heroku. J'ai trouvé que le commentaire mentionné par @sadfuzzy ci-dessus (pour moi): /app/assets/css/bootstrap_and_overrides.css) détenait la clé de ce travail. Pour la Police Génial que vous utilisez: "=demander à twitter bootstrap-statique/fontawesome" et pour les Glyphicons vous utilisez: "=demander à twitter bootstrap-statique/sprites".
- Par le twitter-bootsrap-rails docs, pour permettre Glyphicons, ajoutez le code suivant à la bootstrap_and_overrides.css.moins fichier: @glyphiconsEotPath: font-url("glyphicons-halflings-regular.eot"); @glyphiconsEotPath_iefix: font-url("glyphicons-halflings-regular.eot?#iefix"); @glyphiconsWoffPath: font-url("glyphicons-halflings-regular.woff"); @glyphiconsTtfPath: font-url("glyphicons-halflings-regular.ttf"); @glyphiconsSvgPath: font-url("glyphicons-halflings-regular.svg#glyphicons_halflingsregular"); @import "twitter/bootstrap/glyphicons.less";
InformationsquelleAutor Langusten Gustel

J'ai également de la difficulté à faire boostrap3 glyphicon travail 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');
}`

à application.css.scss fichier
et

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

à l'application.rb fichier.

Personnellement, j'aime cette réponse que je n'arrive pas à modifier mon fichier css de bootstrap
Merci! Enfin, elle a travaillé sur lol
Merci! Il fonctionne enfin après des heures de recherches sur T. T
cela devrait être la bonne réponse

InformationsquelleAutor jbmyid

10

Je pense que vous pourriez avoir un problème avec le asset pipeline

Vous souhaitez modifier bootstrap.css à bootstrap.css.scss, puis de 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 (voir 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');
}
```
Également 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 DONC, après les pour un problème similaire

Espère que cette aide
- Vais-je devoir le changer pour scss? Puis-je le laisser comme un fichier css?
- N'a pas l'air de travailler. J'obtiens un message d'erreur disant qu'il n'était pas valide en css. Il attend un { mais plutôt suis un ("
- Avez-vous la changez pour bootstrap.css.scss? font-path ne fonctionne que dans le SASS
- Oui, je l'ai fait. Je vais essayer à nouveau.
- J'ai essayé de nouveau et pas d'erreur! Je n'obtiens pas quoi faire pour le second semestre. Sur ma machine locale, je suis en cours d'exécution, le mode de développement.
- Pour le second semestre, il est là, chaque fois que vous le déployer sur un serveur, de sorte que vous ne recevez pas un message d'erreur lorsque vous accédez en direct sur la production, mais cela fonctionne maintenant?
- Nope. Il montre encore un peu bizarres % des signes comme avant.
- Pouvez-vous coller le message d'erreur dans la question?
- L'erreur a disparu, mais il n'y a pas de glyphicon, juste quelques signes%.
- J'ai mis à jour la réponse, aussi, si vous regardez au niveau de la console à l'aide de la chrome developer tools, et collez les erreurs ou problèmes qui se présentent, qui pourrait être utile
- C'est le journal d'erreur de google chrome. J'ai mis à jour tout et sa ne marche toujours pas! Est-il un moyen facile de résoudre ce problème?
- C'est un très inefficace puisque vous pouvez très bien le faire en css. Vérifier ma réponse ci-dessus.
- Merci, j'ai l'habitude de le faire de cette façon, mais quand je l'ai poussé à la production, il ne trouve pas l'adresse, parce que les rails ajoute une table de hachage pour chaque actif lorsqu'il ajoute une empreinte digitale (guides.rubyonrails.org/...) si la solution ci-dessus a travaillé pour moi dans la production, mais merci pour le commentaire et content que ta solution a fonctionné!
- A fonctionné tout de suite, et a l'air plus propre que les autres solutions.
InformationsquelleAutor user2262149
5

Bootstrap 3 icônes ressembler à ceci:
```

```
alors que Bootstrap 2 ressemblait à ceci:
```

```
Si le code que vous utilisez n'est pas à jour (vérifier la branche b3), alors vous pourriez avoir à fourche et de modifier les noms d'icônes de votre auto.

InformationsquelleAutor Danny
4

Apparemment Chrome a été brisé pendant des mois re cette question.

Cela a fonctionné pour moi quand je l'ai mis en haut de ma customization_css.css.scss fichier
```
@import 'bootstrap-sprockets';
@import 'bootstrap';
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
```
- Merci. L'ajout de @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"); a fonctionné pour moi. Savez-vous pourquoi?
InformationsquelleAutor AliInvestor
2

Selon Bootstrap 3 Glyphicons ne sont pas de travail, il y a un bug avec le Bootstrap de personnalisation qui bousille la glyphicon polices. J'ai eu le même problème, mais j'ai réussi à résoudre ce problème en téléchargeant l'intégralité de bootstrap à partir de http://getbootstrap.com/, et puis de copier les fichiers de polices de caractères à l'emplacement correct.
- Eh bien, j'ai personnalisé le bootstrap.fichier css beaucoup! Je ne veux pas effacer tout le travail qui a été fait jusqu'à présent. Où exactement les fichiers corrects être?
- Vous n'auriez pas à toucher le fichier css à tous. Dans l'ordre pour moi de régler mon problème, j'ai téléchargé bootstrap-3.0.2-dist.zip, tout copié à partir de la dist/dossier de polices, et a remplacé les polices que j'avais ajouté à mon projet.
- J'ai créé mon projet avec bootstrap-sass et les polices n'ont pas de travail pour moi. Téléchargé le bootstrap zip et copier les polices à travers le \stylesheets\fonts\bootstrap dossier et tout allait bien. Également besoin de changer ma config.rb fichier que mon site n'était pas dans le répertoire racine.
InformationsquelleAutor LeoPleurodon

J'ai essayé avec la solution proposée et il ne fonctionne pas pour moi, ici, est un solution générique qui vous aide à résoudre tout problème lié à ce que vous pourriez avoir.

Ici est la résultante de la police de la définition du visage 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');
}

InformationsquelleAutor 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 avez besoin de convertir votre your_css.fichier css your_css.css.erb

ouais, depuis l'actif du chemin sur la production comprend de hachage digérer. cela devrait être la bonne réponse, même dans le temps, cette question a été posée. il se sent comme le code de la gemme jamais censé travailler

InformationsquelleAutor Ravi Kashyap

1

Dans les Rails 4, avec sass, Bootstrap 3.2.0, et le bootstrap-sass gem utilisation:
```
@import "bootstrap";
@import "bootstrap/theme";
```
InformationsquelleAutor Marc Durdin
1

Vous pouvez copier tous les fichiers d'amorce des fichiers de police publique/fonts et il va fonctionner. Pas besoin pour les importations ou des changements dans l'application.rb.

InformationsquelleAutor Danut Codrescu
0

Lorsque j'utilise bootstrap dans mon rails apps-je utiliser le bootstrap-sass gem.

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

Vous pouvez l'annuler. Il vous suffit d'importer ce que les docs expliquer. Puis les Importer ou de coller vos fichiers modifiés.

Dans un projet php, le glyphe ne marchaient pas, j'ai télécharger le classique bootstrap zip et j'ai extrait le glyphe de fichiers pour les remplacer dans le projet. Dans mes souvenirs le bug apparaît lorsque vous générez un custom style bootstrap à partir de leur site (la source du bug peut-être mal).

Espérons que cette aide!

InformationsquelleAutor coding addicted
0

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

InformationsquelleAutor feng

Assurez-vous que vous avez défini

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

Et ajouter des polices à précompiler liste

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

InformationsquelleAutor Deepak Mahakale

0

Dans mon cas j'ai utilisé ce , que j'ai pris d'oficcial site de Bootstrap et de ne pas voir quoi que ce soit. Mais au lieu de cela, il est nécessaire d'utiliser cette 

InformationsquelleAutor Andrey

À condition que vous ayez les glyphicons fichiers dans app/assets/fonts (si vous n'en avez pas, vous pouvez les télécharger à partir de la bootstrap-saas repo), créer 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');
}

InformationsquelleAutor aruanoc

Vous devez vous connecter pour publier un commentaire.