Ajouter une icône au lien d'en-tête en utilisant Rails fontawesome

Cette fois, je vais partager comme mémo pour moi-même comment ajouter une icône à l'en-tête que j'ai eu du mal de manière inattendue.

environnement

ruby2.6.5 Rails 6.0.3.3

cadre css

bulma

Conclusion

Vous pouvez facilement afficher l'icône en introduisant font-awesome-sass et en utilisant l'icône de la méthode d'assistance. Voici le code réel.

ruby:header.html.erb

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

Résultat ↓

Introduction de font-awesome-sass

Ajoutez ce qui suit au Gemfile

Gemfile

gem 'font-awesome-saas'

Exécutez l'installation du bundle dans le terminal

Ensuite, ajoutez ce qui suit à app / assets / stylesheets / application.scss. Si vous utilisez application.css, convertissez-le en scss.

stylesheets/application.scss

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

• Veuillez ne pas modifier l'ordre ci-dessus!

Exécutez les rails et redémarrez le serveur.

La préparation est terminée! Il ne vous reste plus qu'à écrire le code! N'est-ce pas vraiment facile? Je pense que le simple fait d'avoir une icône changera l'impression du portfolio, alors veuillez utiliser l'icône. J'aimerais que vous l'ajoutiez et amélioriez l'apparence!

J'espère que cela aide les débutants en programmation similaires.

Article de référence

[Rails] Explication approfondie de l'utilisation de font-awesome-sass!