web-dev-qa-db-fra.com

Bootstrap 3 + Rails 4 - Certains Glyphicons ne fonctionnent pas

J'essaie d'utiliser bootstrap 3 dans mon Rails 4 app. Followed this tutoriel pour configurer bootstrap 3 en utilisant bootstrap saas de this page github.

Bootstrap fonctionne bien mais les glyphicons ne fonctionnent pas comme prévu.

Certains glyphicons ne s'affichent pas du tout. Par exemple Je suis fatigué d'en afficher quelques-uns pour les tester dans mon application.html.erb:

glyphicon glyphicon-floppy-disk -> <span class="glyphicon glyphicon-floppy-disk"></span>
</br>
glyphicon glyphicon-plus -> <span class="glyphicon glyphicon-plus"></span>
</br>
glyphicon glyphicon-minus -> <span class="glyphicon glyphicon-minus"></span>

Les icônes s'affichent comme this

L'icône de la disquette n'est pas rendue du tout (montrant un caractère invalide) Les signatures plus et moins ne sont pas en gras et beaucoup plus petites que celles affichées sur le site Web de bootstap.

Je vois également les messages suivants sur la console Rails.

Started GET "/fonts/glyphicons-halflings-regular.woff" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.woff"):

Started GET "/fonts/glyphicons-halflings-regular.ttf" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.ttf"):

Started GET "/fonts/glyphicons-halflings-regular.svg" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.svg"):

J'apprécierais vraiment vos contributions sur cette question.

Merci!

ruby-on-rails-4twitter-bootstrap-3twitter-bootstrap-rails
36
Mike G

J'ai eu le même problème et j'ai trouvé une solution. Le mérite complet revient à Eric Minkel , qui a écrit un article de blog détaillé sur le sujet. Je suggère fortement de le lire pour un raisonnement plus approfondi.

  1. Modifier app/assets/stylesheets/application.css en ajoutant:

    *= require bootstrap

  2. Modifier app/assets/javascripts/application.js en ajoutant:

    //= require bootstrap

  3. Dans config/application.rb, ajoutez ce qui suit après class Application < Rails::Application. Ça devrait ressembler à ça:

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

  4. Dans le terminal, compilez vos actifs en exécutant:

    rake assets:precompile Rails_ENV=development

  5. Modifiez le bootstrap.css fichier en modifiant @font-face emplacements des ressources de ../fonts/ à /assets/. Ça devrait ressembler à ça:

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

Vous avez terminé. Redémarrez simplement avec Rails s et les glyphicons devraient apparaître.

56
oddurs

Utilisez simplement:

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

dans votre fichier SCSS ou SASS. "bootstrap-sprockets" est requis pour la correction d'image et de police.

Vous avez déjà des chances:

@import "bootstrap";

déclaré dans application.scss.

30
istickz

J'avais ce même problème. Résolu en ajoutant:

@import "bootstrap-sprockets";

au-dessus de la ligne existante:

@import 'bootstrap';

dans mon fichier /app/stylesheets/bootstrap_and_customisation.css.scss

13
Andy

J'ai eu le même problème. Quelque chose ne va pas avec le chemin de la police dans le bootstrap. Heureusement, c'est une solution assez simple:

$icon-font-path: 'bootstrap/';

Cela m'a arrangé. Devrait aller avant d'importer bootstrap-sass. Vous devrez peut-être modifier la valeur ici.

11
Radoslav Stankov

Mettez à jour cela. J'avais le même problème et j'ai suivi les étapes fournies par la réponse n ° 1 d'Oddurs. Cela n'a pas fonctionné pour moi pour une raison quelconque. Et puis j'ai réalisé que cela avait à voir avec la structure des fichiers dans mon dossier public (je ne sais pas pourquoi le mien était différent).

Fondamentalement, je l'ai fait fonctionner en ajoutant "/ bootstrap" après "/ assets" puisque tous mes glyphicons étaient dans un dossier "/ bootstrap" je crois par défaut

Donc au lieu de ça:

@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'ai fait ça:

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

dans l'application.css. J'espère que cela aide quelqu'un

6
strohy1210

Si vous utilisez bootstrap-sass-official, ajoutez ceci avant d'importer bootstrap:

$icon-font-path: 'bootstrap-sass-official/assets/fonts/bootstrap/';

4
dipole_moment

Une autre solution consisterait à copier le dossier des polices en public afin que vous ayez

public/fonts/glylpicons-.....

Les mêmes solutions fonctionneraient pour les polices géniales, etc. Le seul inconvénient est que vous changez souvent vos fichiers de polices: o)

4
DaCart

Pour moi, c'était un problème d'incompatibilité des versions entre bootstrap-sass et sass.

Si vous inspectez votre application.css généré, vous verrez que @ font-face est enveloppé dans un @ at-root, qui est une nouvelle déclaration sass non prise en charge par la version de sass que j'utilisais.

J'ai mis à niveau sass-Rails vers 5.0.3 et sass vers 3.4.16 et cela a fonctionné (sass doit être au moins 3.3).

4
Giórgenes

J'ai eu un problème similaire et j'ai découvert une ancienne version des actifs bootstrap étaient servis. Merci à ce message: Rails avec Twitter Bootstrap: sert toujours un ancien actif I vient de courir rake tmp:clear et tous ont travaillé après cela.

3
mahi-man

J'utilise Twitter-bootstrap-Rails, et le message d'erreur est/assets/Twitter/fonts/...

La raison en est que le joyau Twitter-bootstrap-Rails n'inclut pas les ressources Glyphicons dans son répertoire de fournisseurs. J'ai essayé toutes les solutions ci-dessus, mais aucune n'a fonctionné.

La solution finale pour moi est de télécharger le fichier Zip à partir de bootstrap site officiel, décompressez-le, déplacez les fichiers manquants vers le répertoire public/assets/Twitter/fonts. Cela fonctionne pour mon environnement de développement.

2
chao yan

Assurez-vous que votre gemfile est à jour et que le vendor/cache est clair.

Mon problème était dû à des versions étranges de gemmes, j'ai donc exécuté bundle update qui a actualisé le cache.

Updating files in vendor/cache
Removing outdated .gem files from vendor/cache
  * bullet-4.14.9.gem
  * bootstrap-sass-3.3.5.gem
  * pry-0.10.2.gem
  * webmock-1.21.0.gem
  * sprockets-2.12.4.gem
  * minitest-reporters-1.1.3.gem
  * sass-3.2.19.gem
  * coffee-Rails-4.0.1.gem
  * hashie-3.4.2.gem
  * newrelic_rpm-3.13.2.302.gem
  * nprogress-Rails-0.1.6.7.gem
  * schema_plus_pg_indexes-0.1.7.gem
  * hike-1.2.3.gem
  * minitest-5.8.1.gem
  * tilt-1.4.1.gem
  * sass-Rails-4.0.5.gem
Bundle updated!

Une fois que j'ai fait ça, pour faire bonne mesure, je fais aussi pour les autres caches effacées rake assets:clobber et recompilé les actifs Rails_ENV=production rake assets:precompile.

Ensuite, j'ai redémarré nginx ../bin/restart et magique .... les glyphicons sont apparus à la place d'un truc bizarre dans Firefox sur le bureau et d'un appareil photo sur l'iPad. Tout à la place du glyphicon de l'homme.

1
Turgs

Vous pouvez copier tous les fichiers de police bootstrap vers public/fonts et cela fonctionnera

0
Danut Codrescu

A rencontré les mêmes problèmes lors de la mise à niveau vers Rails 4.1.4, bootstrap-sass 3.2.0.

Bons indices ci-dessus mais aucun n'a fait l'affaire pour moi.

Ces étapes ont fonctionné:

  1. Copiez les fichiers de police dans Rails_ROOT/vendor/assets/fonts/bootstrap/(vous devez probablement créer le répertoire)

  2. Ajoutez ceci à config/application.rb

    config.assets.paths += %W("#{Rails.root}/vendor/assets/fonts")

N'a pas eu besoin de directives spéciales ou de redéfinitions de variables sass.

0
Foot

Si vous êtes fatigué de la magie de bootstrap-sass ou Twitter-bootstrap-Rails, ou si vous voulez rester avec une version spécifique de bootstrap, voici une chose manuelle que vous pouvez faire:

  • Téléchargez bootstrap from http://getbootstrap.com/ , placez les fichiers dans votre #{Rails.root}/vendor/assets/javascripts

  • Dans le fichier app/assets/javascripts/application.js, écrivez //= require 'bootstrap-3.3.6-dist/js/bootstrap.min'

  • Dans le fichier app/assets/stylesheets/application.css, écrivez *= require 'bootstrap-3.3.6-dist/css/bootstrap.min'

  • Mettez un script comme celui-ci dans votre {Rails.root}/bin et configurez-le pour qu'il soit exécuté par capistrano lorsque vous déployer en production:

#!/usr/bin/env Ruby     

Rails_path = File.expand_path('../../', __FILE__)
puts Rails_path

`mkdir public/images`

Dir.glob("#{Rails_path}/vendor/assets/**/images").each do |directory|
  `cp #{directory}/* #{Rails_path}/public/images/`
end

`mkdir public/fonts`

Dir.glob("#{Rails_path}/vendor/assets/**/fonts").each do |directory|
  `cp #{directory}/* #{Rails_path}/public/fonts/`
end
  • Configurez nginx sur vos machines de production pour servir public/images et public/fonts.
        location ~ ^/(assets|images|fonts)/(.*)$ {
            alias /var/www/my_app/current/public/$1/$2;
            gzip on;
            expires max;
            add_header Cache-Control public;
        }

Désormais, chaque fois que vous dites cap production deploy, toutes les choses manuelles seront prises en charge.

0
Châu Hồng Lĩnh

Utilisation de Rails 4.2.6

Je devais éditer config/application.rb

J'ai ajouté cette ligne

.
.
.
class Application < Rails::Application
   config.action_controller.relative_url_root = '/myapp'

Maintenant, les polices étaient référencées par rapport au relative_url_root valeur.

0
mwangi

J'avais du mal à voir:

<span class="glyphicon glyphicon-edit"></span>

dans mon environnement de développement. L'ajustement suivant a fonctionné.

Dans votre fichier css.scss, ajoutez:

@import "bootstrap-sprockets";
@import 'bootstrap';
0
erickuhn19

J'utilise angular-ui-bootstrap-Rails gem

bijou 'angular-ui-bootstrap-Rails'

J'ai téléchargé bootstrap et collé le dossier des polices sous le dossier app/assets

Redémarrez ensuite le serveur Rails.

0
Mahesh

L'ajout de ce qui suit à application.scss a fonctionné pour moi sur Rails 5 (après avoir décommenté @import "bootstrap/glyphicons";du même fichier [en utilisant le orats gem])

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