Fügen Sie dem Header-Link mit Rails fontawesome ein Symbol hinzu

Dieses Mal werde ich mir als Memo mitteilen, wie ich dem Header ein Symbol hinzufügen kann, das mir unerwartet schwer gefallen hat.

Umgebung

ruby2.6.5 Rails 6.0.3.3

CSS-Framework

bulma

Fazit

Sie können das Symbol einfach anzeigen, indem Sie font-awesome-sass einführen und das Hilfsmethoden-Symbol verwenden. Unten ist der aktuelle Code.

ruby:header.html.erb

<%= link_to  icon('fas','sign-in-alt', 'Einloggen'), new_user_session_path, class: "navbar-item" %>
<%= link_to icon('fas', 'user-plus', 'Anmelden'), new_user_registration_path, class: "navbar-item" %>

Ergebnis ↓

Einführung von font-awesome-sass

Fügen Sie der Gemfile Folgendes hinzu

Gemfile

gem 'font-awesome-saas'

Führen Sie die Bundle-Installation im Terminal aus

Fügen Sie als Nächstes Folgendes zu app / assets / stylesheets / application.scss hinzu. Wenn Sie application.css verwenden, konvertieren Sie es in scss.

stylesheets/application.scss

@import 'font-awesome-sprockets';
@import 'font-awesome';

• Bitte ändern Sie die obige Reihenfolge nicht!

Führen Sie Rails s aus und starten Sie den Server neu.

Die Vorbereitung ist abgeschlossen! Alles was Sie tun müssen, ist den Code zu schreiben! Ist es nicht wirklich einfach? Ich denke, dass nur ein Symbol den Eindruck des Portfolios verändert. Verwenden Sie daher bitte das Symbol. Ich möchte, dass Sie es hinzufügen und das Erscheinungsbild verbessern!

Ich hoffe es hilft ähnlichen Programmieranfängern.

Referenzartikel

[Rails] Ausführliche Erklärung zur Verwendung von font-awesome-sass!