Utilizzo dei caratteri con la pipeline di asset di Rails

Ho alcuni caratteri configurati nel mio file Scss in questo modo:

@font-face { font-family: 'Icomoon'; src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'), asset-url('icoMoon.woff', font) format('woff'), asset-url('icoMoon.ttf', font) format('truetype'), asset-url('icoMoon.svg#Icomoon', font) format('svg'); } 

Il file di font attuale è memorizzato in / app / assets / fonts /

Ho aggiunto config.assets.paths << Rails.root.join("app", "assets", "fonts") al mio file application.rb

e la sorgente CSS compilata è la seguente:

 @font-face { font-family: 'Icomoon'; src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg"); } 

Ma quando eseguo l’app i file dei font non vengono trovati. I registri:

Avvia GET “/assets/icoMoon.ttf” per 127.0.0.1 a 2012-06-05 23:21:17 +0100 Asset servito /icoMoon.ttf – 404 Not Found (13ms)

Perché la pipeline degli asset non appiattisce i file dei font solo in / assets?

Qualche idea gente?

Cordiali saluti, Neil

Informazioni extra:

Durante il controllo della console di rails per i percorsi delle risorse e assetprecompile ottengo il seguente:

 1.9.2p320 :001 > y Rails.application.config.assets.precompile --- - !ruby/object:Proc {} - !ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/ - .svg - .eot - .woff - .ttf => nil 1.9.2p320 :002 > y Rails.application.config.assets.paths --- - /Users/neiltonge/code/neiltonge/app/assets/fonts - /Users/neiltonge/code/neiltonge/app/assets/images - /Users/neiltonge/code/neiltonge/app/assets/javascripts - /Users/neiltonge/code/neiltonge/app/assets/stylesheets - /Users/neiltonge/code/neiltonge/vendor/assets/images - /Users/neiltonge/code/neiltonge/vendor/assets/javascripts - /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets - /Users/neiltonge/.rvm/gems/[email protected]/gems/jquery-rails-2.0.0/vendor/assets/javascripts - /Users/neiltonge/.rvm/gems/[email protected]/gems/coffee-rails-3.2.1/lib/assets/javascripts - /Users/neiltonge/.rvm/gems/[email protected]/gems/bourbon-1.3.0/app/assets/stylesheets - !ruby/object:Pathname path: /Users/neiltonge/code/neiltonge/app/assets/fonts => nil 

  1. Se la tua versione di Rails è tra > 3.1.0 e < 4 , posiziona i tuoi font in ognuna di queste cartelle:

    • app/assets/fonts
    • lib/assets/fonts
    • vendor/assets/fonts

    Per le versioni di Rails > 4 , devi inserire i tuoi font nella cartella app/assets/fonts .

    Nota: per posizionare i caratteri al di fuori di queste cartelle designate, utilizzare la seguente configurazione:

    config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

    Per le versioni di Rails > 4.2 , si raccomanda di aggiungere questa configurazione a config/initializers/assets.rb .

    Tuttavia, è anche ansible aggiungerlo a config/application.rb o a config/production.rb

  2. Dichiara il tuo carattere nel tuo file CSS:

     @font-face { font-family: 'Icomoon'; src:url('icomoon.eot'); src:url('icomoon.eot?#iefix') format('embedded-opentype'), url('icomoon.svg#icomoon') format('svg'), url('icomoon.woff') format('woff'), url('icomoon.ttf') format('truetype'); font-weight: normal; font-style: normal; } 

    Assicurati che il tuo font sia nominato esattamente come nella parte URL della dichiarazione. Le lettere maiuscole e i segni di punteggiatura contano. In questo caso, il carattere dovrebbe avere il nome icomoon .

  3. Se stai usando Sass o Less con Rails > 3.1.0 (il tuo file CSS ha estensione .scss o .less ), cambia l' url(...) nella dichiarazione font-url(...) in font-url(...) .

    Altrimenti, il tuo file CSS dovrebbe avere l'estensione .css.erb , e la dichiarazione del font dovrebbe essere url('<%= asset_path(...) %>') .

    Se si utilizza Rails > 3.2.1 , è ansible utilizzare font_path(...) invece di asset_path(...) . Questo aiutante fa esattamente la stessa cosa ma è più chiaro.

  4. Infine, usa il tuo font nel tuo CSS come lo hai dichiarato nella parte font-family . Se è stato dichiarato in maiuscolo, puoi usarlo in questo modo:

     font-family: 'Icomoon'; 

Ora ecco una svolta:

Dovresti posizionare tutti i tipi di carattere in app/assets/fonts/ poiché verranno precompilati in staging e produzione per impostazione predefinita; verranno precompilati quando vengono trasferiti su heroku .

I file di font posizionati in vendor/assets NON saranno precompilati in fase di staging o produzione per impostazione predefinita – falliranno su heroku . Fonte!

– @plapier, thoughtbot / bourbon

Sono fermamente convinto che mettere i font del fornitore in vendor/assets/fonts abbia molto più senso che metterli in app/assets/fonts . Con queste 2 linee di configurazione extra questo ha funzionato bene per me (su Rails 4):

 app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts') app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/ 

- @jhilden, thoughtbot / bourbon

L'ho anche testato su rails 4.0.0 . In realtà l'ultima riga è sufficiente per precompilare in sicurezza i font dalla cartella del vendor . Ci sono volute un paio d'ore per capirlo. Spero che abbia aiutato qualcuno.

Se non vuoi tenere traccia dello spostamento dei tuoi font in giro:

 # Adding Webfonts to the Asset Pipeline config.assets.precompile << Proc.new { |path| if path =~ /\.(eot|svg|ttf|woff)\z/ true end } 

Devi usare font-url nel tuo blocco @ font-face, non url

 @font-face { font-family: 'Inconsolata'; src:font-url('Inconsolata-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } 

così come questa riga in application.rb, come hai menzionato (per i font in app/assets/fonts

 config.assets.paths << Rails.root.join("app", "assets", "fonts") 

Ecco il mio approccio all’uso dei caratteri nella pipeline degli asset:

1) Metti tutto il tuo file font sotto app/assets/fonts/ , in realtà non sei limitato a metterlo sotto il nome della cartella dei fonts . Puoi inserire qualsiasi nome di sottocartella che ti piace. Ad esempio app/assets/abc o app/assets/anotherfonts . Ma consiglio vivamente di metterlo sotto app/assets/fonts/ per una migliore struttura delle cartelle.

2) Dal tuo file sass, usando il sass helper font-path per richiedere i tuoi asset di font come questo

 @font-face { font-family: 'FontAwesome'; src: url(font-path('fontawesome-webfont.eot') + '?v=4.4.0'); src: url(font-path('fontawesome-webfont.eot') + '?#iefix&v=4.4.0') format('embedded-opentype'), url(font-path('fontawesome-webfont.woff2') + '?v=4.4.0') format('woff2'), url(font-path('fontawesome-webfont.woff') + '?v=4.4.0') format('woff'), url(font-path('fontawesome-webfont.ttf') + '?v=4.4.0') format('truetype'), url(font-path('fontawesome-webfont.svg') + '?v=4.4.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } 

3) Esegui le bundle exec rake assets:precompile dal tuo computer locale e vedi il risultato application.css. Dovresti vedere qualcosa di simile a questo:

 @font-face { font-family: 'FontAwesome'; src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?v=4.4.0"); src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?#iefix&v=4.4.0") format("embedded-opentype"), url("/assets/fontawesome-webfont-3c4a1bb7ce3234407184f0d80cc4dec075e4ad616b44dcc5778e1cfb1bc24019.woff2" "?v=4.4.0") format("woff2"), url("/assets/fontawesome-webfont-a7c7e4930090e038a280fd61d88f0dc03dad4aeaedbd8c9be3dd9aa4c3b6f8d1.woff" "?v=4.4.0") format("woff"), url("/assets/fontawesome-webfont-1b7f3de49d68b01f415574ebb82e6110a1d09cda2071ad8451bdb5124131a292.ttf" "?v=4.4.0") format("truetype"), url("/assets/fontawesome-webfont-7414288c272f6cc10304aa18e89bf24fb30f40afd644623f425c2c3d71fbe06a.svg" "?v=4.4.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; } 

Se vuoi sapere come funziona la pipeline degli asset, puoi visitare la seguente semplice guida: https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2

Stavo avendo questo problema su Rails 4.2 (con Ruby 2.2.3) e ho dovuto modificare il partial _paths.scss font-awesome per rimuovere i riferimenti a $fa-font-path e rimuovere una barra diretta. Il seguente è stato rotto:

 @font-face { font-family: 'FontAwesome'; src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), font-url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), font-url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), font-url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), font-url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } 

E i seguenti lavori:

 @font-face { font-family: 'FontAwesome'; src: font-url('fontawesome-webfont.eot?v=#{$fa-version}'); src: font-url('fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), font-url('fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), font-url('fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), font-url('fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), font-url('fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } 

Un’alternativa sarebbe semplicemente rimuovere la barra diretta seguendo il percorso $fa-font-path e quindi definire $fa-font-path come una stringa o sottodirectory vuota con la barra finale (se necessario).

Ricordarsi di ricompilare le risorse e riavviare il server secondo le necessità. Ad esempio, in una configurazione passeggeri:

 prompt> rake assets:clean; rake assets:clobber prompt> RAILS_ENV=production RAILS_GROUPS=assets rake assets:precompile prompt> service passenger restart 

Quindi ricaricare il browser.

Sto usando Rails 4.2, e non sono riuscito a far apparire le icone del footable. Erano mostrate piccole scatole, invece del (+) su file collassate e le piccole frecce di ordinamento che mi aspettavo. Dopo aver studiato le informazioni qui, ho apportato una semplice modifica al mio codice: rimuovere la directory dei font in css. Cioè, cambia tutte le voci css in questo modo:

 src:url('fonts/footable.eot'); 

per assomigliare a questo:

 src:url('footable.eot'); 

Ha funzionato. Penso che Rails 4.2 assuma già la directory dei font, quindi specificarlo nuovamente nel codice css rende i file dei font non trovati. Spero che questo ti aiuti.

Ho avuto un problema simile quando ho aggiornato la mia app Rails 3 a Rails 4 di recente. I miei font non funzionavano correttamente come in Rails 4+, siamo autorizzati a mantenere i font nella directory app/assets/fonts . Ma la mia app Rails 3 aveva un’organizzazione di font diversa. Quindi ho dovuto configurare l’app in modo che continuasse a funzionare con Rails 4+ con i miei font in un posto diverso da app/assets/fonts . Ho provato diverse soluzioni ma dopo aver trovato gem non stupido-digest-assets , l’ho reso così facile.

Aggiungi questa gem aggiungendo la seguente riga al tuo Gemfile:

 gem 'non-stupid-digest-assets' 

Quindi esegui:

 bundle install 

E infine aggiungi la seguente riga nel tuo file config / initializers / non_digest_assets.rb :

 NonStupidDigestAssets.whitelist = [ /\.(?:svg|eot|woff|ttf)$/ ] 

Questo è tutto. Questo ha risolto bene il mio problema. Spero che questo aiuti qualcuno che ha riscontrato problemi simili come me.

Nel mio caso la domanda originale stava usando asset-url senza risultati invece della semplice proprietà url css. L’utilizzo di asset-url finito per funzionare per me in Heroku. Inoltre, imposta i caratteri nella cartella /assets/fonts e chiama asset-url('font.eot') senza aggiungere alcuna sottocartella o altra configurazione.

Se hai un file chiamato scaffolds.css.scss, allora c’è una possibilità che sovrascrive tutte le cose personalizzate che stai facendo negli altri file. Ho commentato quel file e improvvisamente tutto ha funzionato. Se non c’è nulla di importante in quel file, potresti anche eliminarlo!

posiziona i tuoi font nella cartella app / assets / fonts e imposta il percorso di caricamento automatico quando l’app inizia a utilizzare il codice in application.rb

config.assets.paths << Rails.root.join ("app", "assets", "font") e

quindi utilizzare il seguente codice in css.

@ font-face {

  font-family: 'icomoon'; src: asset-url('icomoon.eot'); src: asset-url('icomoon.eot') format('embedded-opentype'), asset-url('icomoon.woff') format('woff'), asset-url('icomoon.ttf') format('truetype'), asset-url('icomoon.svg') format('svg'); font-weight: normal; font-style: normal; 

}

Provaci.

Grazie