web-dev-qa-db-de.com

Rails: Font Awesome verwenden

Mein Webdesigner hat mir aktualisierte Schriftarten/Icons zur Verfügung gestellt, die zu Font Awesome hinzugefügt wurden - er hat diese in einem lokalen Schriftartenordner abgelegt. Ich erhielt auch eine Datei font-awesome.css. 

Ich habe den Ordner fonts direkt in meine Assets kopiert und font-awesome.css in Assets/Stylesheets eingefügt.

Die CSS wird in meinem Code korrekt referenziert, aber keine der Symbole aus dem Schriftartenordner werden geladen.

Gibt es etwas, das ich tun muss, um sicherzustellen, dass alles korrekt geladen wird und/oder auf den Ordner "Schriftarten" verwiesen wird?

54
user464180

zuerst: Füge app/assets/fonts zum Asset-Pfad hinzu (config/application.rb)

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

verschieben Sie dann die Zeichensatzdateien in/assets/fonts (erstellen Sie zuerst den Ordner).

Benennen Sie die Datei font-awesome.css jetzt in font-awesome.css.scss.erb .__ um und bearbeiten Sie sie wie folgt: Change:

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome')    format('svg');
  font-weight: normal;
  font-style: normal;
}

zu diesem:

@font-face {
  font-family: "FontAwesome";
  src: url('<%= asset_path("fontawesome-webfont.eot") %>');
  src: url('<%= asset_path("fontawesome-webfont.eot") + "?#iefix" %>') format('eot'), url('<%= asset_path("fontawesome-webfont.woff") %>') format('woff'), url('<%= asset_path("fontawesome-webfont.ttf") %>') format('truetype'), url('<%= asset_path("fontawesome-webfont.svg") + "#FontAwesome" %>') format('svg');
  font-weight: normal;
  font-style: normal;
}

Zum Schluss: Überprüfen Sie, ob alle Ressourcen korrekt geladen sind (mit Firebug oder Chrome Inspector).

121
VMOrtega

Es gibt jetzt einen einfacheren Weg, fügen Sie einfach gem "font-awesome-Rails" zu Ihrer Gemfile hinzu und führen Sie bundle install aus.

Fügen Sie dann in Ihrer application.css die CSS-Datei ein:

/*
 *= require font-awesome
 */

Der Font-Awesome wird automatisch in Ihre Asset-Pipeline eingefügt. Erledigt. Beginnen Sie damit, es zu benutzen :)

Weitere Informationen finden Sie in der Dokumentation zu font-awesome-Rails .

46
nathanvda

Ich biete eine weitere Antwort an, in dieser müssen Sie sich nicht um Edelsteine ​​oder Pfade oder um eine dieser Overkill-Lösungen kümmern. Fügen Sie diese Zeile einfach in Ihre application.html.erb (oder in welche Datei auch immer Ihr Layout ein) ein.

<head>
...
<link href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>  

Neben Vicoars Antwort

Für Rails 4 müssen Sie das CSS etwas anders ändern. Beachten Sie die Verwendung von font_url:

@font-face {
  font-family: "FontAwesome";
  src: font_url('fontawesome-webfont.eot');
  src: font_url('fontawesome-webfont.eot?#iefix') format('eot'), font_url('fontawesome-webfont.woff') format('woff'), font_url('fontawesome-webfont.ttf') format('truetype'), font_url('fontawesome-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
14
EdC

Nun ist folgender Weg der einfachste Weg, Font Awesome mit Rails zu integrieren:

SASS Ruby Gem

Verwenden Sie den offiziellen Font Awesome SASS Ruby Gem, um Font Awesome SASS ganz einfach in ein Rails-Projekt zu integrieren.

Füge diese Zeile zum Gemfile deiner Anwendung hinzu:

gem 'font-awesome-sass'

Und dann ausführen:

$ bundle

Füge das zu deiner Application.scss hinzu:

@import "font-awesome-sprockets";
@import "font-awesome";
2
AR Rose

Ich habe Vicoars ausprobiert, aber es funktioniert nicht bei meinem auf Ruby 1.9.3 und Rails 3.2 basierenden Projekt. Dann benenne ich den Dateinamen font-awesome.css in font-awesome.css.erb um und ändere den @font-face wie folgt:

@font-face {
  font-family: "FontAwesome";
  src: url(<%= asset_path 'fontawesome-webfont.eot' %>);
  src: url(<%= asset_path 'fontawesome-webfont.eot' + '?#iefix' %>) format('eot'), url(<%= asset_path 'fontawesome-webfont.woff' %>) format('woff'), url(<%= asset_path 'fontawesome-webfont.ttf' %>) format('truetype'), url(<%= asset_path 'fontawesome-webfont.svg' + '#FontAwesome' %>) format('svg');
  font-weight: normal;
  font-style: normal;
}

Es funktioniert sehr gut und der Code ist sehr einfach ... (Sie können den Guide asset_pipeline referenzieren.)

1
Tony Han

So verwenden Sie font-awesome 4 mit Barebones Rails 6 und Webpacker, ohne zusätzliche Juwelen, kopieren Schriftarten oder CSS-Dateien in Ihre App und machen andere seltsame Dinge:

Füge das font-awesome npm-Paket - package.json hinzu:

{
  "dependencies": {
    "font-awesome": "4.7.0"
  }
}

Fügen Sie die CSS-Datei font-awesome in das CSS-Manifest ein - app/stylesheets/application.css:

/*
 *= require font-awesome/css/font-awesome.min
 *= require_tree .
 *= require_self
 */

Überschreiben Sie die Schriftartdefinition in unserer benutzerdefinierten CSS-Datei - app/stylesheets/font-awesome.css.erb:

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

Fügen Sie die Dateitypen node_modules font-awesome dir + font in die Assets-Pipeline ein - config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join('node_modules/font-awesome/fonts')
Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

Sie erhalten Zeichensätze, die in das Verzeichnis public/fonts aufgenommen und kompiliert wurden, und Sie erhalten eine einzige CSS-Datei, in die alle Inhalte (Ihre App und font-awesome) kompiliert wurden.

Die Sache ist, dass font-awesome minimiertes CSS hardcodierte Pfade zu Schriften enthält. Um dies zu überschreiben, fügen wir einfach die Direktive font-face mit generierten Schriftenpfaden hinzu. Aus diesem Grund sollte die Datei font-awesome.min.css zuerst in die Manifestdatei eingefügt werden.

1

Nachdem ich das gerade mit Rails 5.2 durchgegangen bin, möchte ich Ihnen mitteilen, wie das funktioniert, wenn Sie das font-awesome-Rails-Juwel nicht verwenden möchten:

  1. Legen Sie die FontAwesome-Fontdateien (EOT, WOFF usw.) in einem entsprechend benannten Unterordner von / app/assets, / vendor/assets oder / lib/assets ab, z. B .: / app/assets/fonts.
  2. Fügen Sie diese Zeile zu config/initializers/assets.rb hinzu:

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

  3. Benennen Sie FontAwesome's all.css zu all.scss um. Wenn Sie dies nicht tun, verarbeitet Rails die Pfadreferenzen im nächsten Schritt nicht vor.

  4. Ersetzen Sie alle Pfade zu den Zeichensatzdateien durch Verweise auf die Rails-Pipeline (dh. font-url oder asset-url ):

    z.B. Vor

    @ font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; src: url (".. /webfonts/fa-solid-900.eot"); src: url ("../ webfonts/fa-solid-900.eot? #iefix") format ("embedded-opentype"), url (" ../webfonts/fa-solid-900.woff2 ") format (" woff2 "), url (" ../ webfonts/fa-solid-900.woff ") format (" woff "), url (" .. /webfonts/fa-solid-900.ttf ") format (" truetype "), url (" ../ webfonts/fa-solid-900.svg # fontawesome ") format (" svg ");}

    z.B. nach dem

    @ font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; src: asset-url (" fa-solid-900.eot "); src: asset-url (" fa-solid-900.eot? #iefix ") format (" embedded-opentype "), asset-url (" fa-solid- 900.woff2 ") Format (" woff2 "), Asset-URL (" fa-solid-900.woff ") Format (" woff "), Asset-URL (" fa-solid-900.ttf ") Format (" truetype "), asset-url (" fa-solid-900.svg # fontawesome ") format (" svg ");}

  5. Starten Sie den Server neu.

0
MSC

Für Rails 3.2. * Eine schnelle Lösung:

1) Legen Sie die fantastischen Schriftdateien in einem Ordner "fonts" im öffentlichen Ordner ab .__) 2) Öffnen Sie font-awesome.css und ändern Sie die 4 Einträge für "../fonts" in "/ fonts" oben in der Datei

@font-face
{
     font-family:'FontAwesome';
     src:url('/fonts/fontawesome-webfont.eot?v=3.2.1');
     src:url('/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') 
     format('embedded-opentype'),url('/fonts/fontawesome-webfont.woff?v=3.2.1') 
     format('woff'),url('/fonts/fontawesome-webfont.ttf?v=3.2.1') 
     format('truetype'),url('../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') 
     format('svg');
     font-weight:normal;
     font-style:normal;
}
[class^="icon-"],[class*=" icon-"]
{
     font-family:FontAwesome;
     font-weight:normal;
     font-style:normal;
     text-decoration:inherit;
     -webkit-font-smoothing:antialiased;
     *margin-right:.3em;
}  
0
Tom