Bootstrap 3 + Rails 4 – Alcuni Glyphicon non funzionano

Sto cercando di usare bootstrap 3 nella mia app per rails 4. Seguito questo tutorial per configurare bootstrap 3 usando bootstrap saas da questa pagina github.

Bootstrap funziona bene ma i glyphicon non funzionano come previsto.

Alcuni glyphicon non vengono visualizzati affatto. Ad esempio, sono stanco di mostrarne alcuni per testare nel mio application.html.erb:

glyphicon glyphicon-floppy-disk ->  
glyphicon glyphicon-plus ->
glyphicon glyphicon-minus ->

Le icone rendono così

L’icona del disco floppy non viene visualizzata affatto (mostra un carattere non valido) I segni più e meno non sono in grassetto e molto più piccoli di quelli mostrati sul sito web bootstap.

Sto anche vedendo i seguenti messaggi sulla console di 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"): 

Apprezzerei molto i tuoi contributi su questo argomento.

Grazie!

Ho avuto lo stesso problema e ho trovato una soluzione. Pieno merito va a Eric Minkel , che ha scritto un post sul blog dettagliato sull’argomento. Consiglio vivamente di leggerlo per ulteriori ragionamenti.

  1. Modifica app/assets/stylesheets/application.css aggiungendo:

     *= require bootstrap 
  2. Modifica app/assets/javascripts/application.js aggiungendo:

     //= require bootstrap 
  3. In config/application.rb , aggiungere quanto segue dopo l’ class Application < Rails::Application . Dovrebbe sembrare come questo:

     class Application < Rails::Application config.assets.paths << "#{Rails}/vendor/assets/fonts" 
  4. Nel terminale, compilare le risorse eseguendo:

     rake assets:precompile RAILS_ENV=development 
  5. Modifica il file bootstrap.css modificando le posizioni delle risorse @font-face da ../fonts/ in /assets/ . Dovrebbe sembrare come questo:

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

Hai finito. Basta ricominciare con le rails s e dovrebbero apparire i glyphicon.

Basta usare:

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

nel tuo file SCSS o SASS. “bootstrap-sprockets” è richiesto per la correzione di immagini e font.

È probabile che tu abbia già:

 @import "bootstrap"; 

dichiarato in application.scss.

Stavo avendo lo stesso problema. Risolto aggiungendo:

 @import "bootstrap-sprockets"; 

sopra la linea esistente:

 @import 'bootstrap'; 

nel mio file /app/stylesheets/bootstrap_and_customisation.css.scss

Ho avuto lo stesso problema. C’è qualcosa di sbagliato nel percorso del font in bootstrap. Fortunatamente è una soluzione abbastanza facile:

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

Questo l’ha risolto per me. Dovrebbe andare prima di importare bootstrap-sass. Potrebbe essere necessario modificare il valore qui.

Aggiornamento a questo. Stavo avendo lo stesso problema e ho seguito i passaggi forniti dalla risposta n. 1 di Oddurs. Questo non ha funzionato per me per qualche motivo. E poi ho capito che aveva a che fare con la struttura dei file nella mia cartella pubblica (non sono sicuro del perché la mia fosse diversa).

Fondamentalmente ho funzionato aggiungendo “/ bootstrap” dopo “/ assets” dato che tutti i miei glyphicons erano in una cartella “/ bootstrap”, credo per default

Quindi, invece di questo:

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

L’ho fatto:

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

nel file application.css. Spero che questo aiuti qualcuno

Un’altra soluzione sarebbe copiare la cartella dei caratteri in pubblico così hai

 public/fonts/glylpicons-..... 

Le stesse soluzioni funzionerebbero per font-awesome ecc. L’unico svantaggio di questo è se cambi i tuoi file di font spesso: o)

Se stai usando bootstrap-sass-official, aggiungilo prima di importare bootstrap:

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

Per me questo era un problema con l’incompatibilità delle versioni tra bootstrap-sass e sass.

Se controlli la tua application.css generata vedrai che @ font-face è racchiuso in una @ at-root, che è una nuova dichiarazione sass non supportata dalla versione di sass che stavo usando.

Ho aggiornato sass-rail a 5.0.3 e passato a 3.4.16 e ha funzionato (il sass deve essere almeno 3.3).

Ho avuto un problema simile e ho scoperto che veniva servita una versione precedente delle risorse bootstrap. Grazie a questo post: Rails con Twitter Bootstrap: serve ancora un vecchio asset Ho appena eseguito rake tmp:clear e tutto ha funzionato dopo.

Sto usando twitter-bootstrap-rails e il messaggio di errore è / assets / twitter / fonts / …

Il motivo è che la gem di twitter-bootstrap-rails non include le risorse di Glyphicons nella sua directory del venditore. Ho provato tutte le soluzioni sopra, ma nessuna ha funzionato.

La soluzione finale per me è scaricare il file zip dal sito ufficiale di bootstrap, decomprimerlo, spostare i file mancanti nella directory public / assets / twitter / fonts. Funziona per il mio ambiente di sviluppo.

Assicurati che il tuo gemfile sia aggiornato e che il vendor/cache sia chiaro.

Il mio problema era dovuto a strane versioni di gemme, quindi ho eseguito l’ bundle update che ha aggiornato la 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! 

Una volta che l’ho fatto, per buona misura faccio in modo che altre cache vengano cancellate troppo rake assets:clobber e ricompilate le risorse RAILS_ENV=production rake assets:precompile .

Poi ho riavviato nginx ../bin/restart e magic …. i glyphicons sono comparsi invece di una strana cosa quadrata in Firefox sul desktop e una fotocamera sull’iPad. Tutto a posto dell’uomo glyphicon.

Ha incontrato gli stessi problemi durante l’aggiornamento a Rails 4.1.4, bootstrap-sass 3.2.0.

Buoni suggerimenti sopra ma nessuno ha fatto il trucco per me.

Questi passaggi hanno funzionato:

  1. Copia i file dei font in RAILS_ROOT / vendor / assets / fonts / bootstrap / (probabilmente dovrai creare la directory)

  2. Aggiungi questo a config / application.rb

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

Non aveva bisogno di direttive speciali o sass re-definizioni variabili.

Stavo riscontrando problemi di visualizzazione:

  

nel mio ambiente di sviluppo. La seguente regolazione ha funzionato.

Nel tuo file css.scss aggiungi:

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

Se sei stanco della magia di bootstrap-sass o twitter-bootstrap-rails, o se vuoi stare con una versione specifica di bootstrap, ecco cosa manuale puoi fare:

  • Scarica il bootstrap da http://getbootstrap.com/ , metti i file all’interno del tuo #{Rails.root}/vendor/assets/javascripts

  • Nel file app / assets / javascripts / application.js , scrivi //= require 'bootstrap-3.3.6-dist/js/bootstrap.min'

  • Nel file app / assets / stylesheets / application.css , scrivi *= require 'bootstrap-3.3.6-dist/css/bootstrap.min'

  • Metti uno script come questo in {Rails.root} / bin e configuralo per eseguirlo da capistrano quando si distribuisce in produzione:

 #!/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 
  • Configura nginx sulle tue macchine di produzione per servire pubblico / immagini e pubblico / tipi di carattere .
  location ~ ^/(assets|images|fonts)/(.*)$ { alias /var/www/my_app/current/public/$1/$2; gzip on; expires max; add_header Cache-Control public; } 

D’ora in poi, ogni volta che dirai che la cap production deploy , tutte le attività manuali saranno prese in considerazione.

È ansible copiare tutti i file dei font di bootstrap in public / fonts e funzionerà

Utilizzo delle guide 4.2.6

Ho dovuto modificare config/application.rb

Ho aggiunto questa linea

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

Ora i caratteri venivano referenziati relativamente al valore relative_url_root .

Aggiungendo quanto segue a application.scss ha funzionato per me su Rails 5 (dopo aver decommentato @import "bootstrap/glyphicons"; dallo stesso file [usando la gem di orats ])

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

Sto usando gem angular-ui-bootstrap-rails

gem ‘angular-ui-bootstrap-rails’

Ho scaricato bootstrap e incollato la cartella dei font nella cartella app / assets

Quindi riavviare il server delle guide.