[Rails 6] Méthode spécifique d'incorporation de Font Awesome dans link_to [Copier OK]

introduction

J'ai pensé "Je veux créer un bouton de suppression pour link_to avec une icône" dans Rails, donc j'ai résumé ce que j'ai étudié.

Cible

Ceux qui ont commencé à fabriquer des artefacts avec des rails

supposition

objectif

Changer l'affichage de link_to en "" caractère "→" icône ""

before after.png

after before.png

Jusqu'à ce que le "personnage" de votre link_to devienne une "icône"

① Paramètre "Font Awesome" ② Obtenez le code d'icône que vous souhaitez utiliser ③ Intégrez «l'icône» dans «link_to»

① Paramètre "Font Awesome"

Cette fois, je me suis référé à l'article de référence! Les paramètres détaillés sont également décrits, veuillez vous y référer! [[Rails] Explication approfondie de l'utilisation de font-awesome-sass! ] (https://pikawaka.com/rails/font_awesome_sass)

** 1. Introduction de font-awesome-sass **

Gemfile


gem 'font-awesome-sass'

Terminal


bundle install

application.scss


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

** 2. Introduction de font-awesome-rails **

Terminal


brew install yarn

yarn add @fortawesome/fontawesome-free

app/javascript/packs/application.js


import '@fortawesome/fontawesome-free/js/all';

app/assets/stylesheets/application.scss


@import '~@fortawesome/fontawesome-free/scss/fontawesome';

② Obtenez le code de l'icône que vous souhaitez utiliser

  1. Allez sur le lien ci-dessous [Font Awesome] (https://fontawesome.com/icons?d=gallery)

  2. Trouvez l'icône que vous souhaitez utiliser Cette fois, recherchez l'icône de la corbeille et sélectionnez-la ゴミ箱アイコンの検索.png

  3. Copiez le code affiché ゴミ箱アイコンのコードを取得.png

** Intégrez le code obtenu ici dans link_to dans in **

③ Intégrez «l'icône» dans «link_to»

Méthode Incorporez le "code d'icône" obtenu précédemment dans le code suivant

Pour le bouton de suppression

after


<%= link_à l'assistant d'URL, class: "btn btn-danger",Spécification de la méthode HTTP faire%>
Code d'icône#=>Insérez ici
<% end %>

Exemple)
<%= link_à l'assistant d'URL, class: "btn btn-danger", method: :delete do %>
  <i class="far fa-trash-alt"></i> #=>Code d'icône
<% end %>

A titre de comparaison, je posterai également le link_to ↓ couramment utilisé

before


<%= linl_to "Supprimer" ,Aide URL,class: btn btn-primary, method: :delete %>

Cliquez ici pour plus d'informations. Générer un lien de document Rails (htt) ps://railsdoc.com/page/link_to)

modèle

J'écrirai le code de l'image introduite en premier. Veuillez l'utiliser si vous le souhaitez! (Veuillez remplir vous-même la partie URL)

C'est ↓

before.png

** Bouton Détails (loupe) ** Couleur => Icône bleue => Loupe

Détails


  <%= link_to URL ,"btn btn-danger text-white", method: :get do %>
    <i class="fas fa-search"></i> 
  <% end %>

** Bouton Modifier (stylo) ** Couleur => Icône verte => Stylo

Éditer


<%= link_to URL, class: "btn btn btn-secondary text-white", method: :get do %>
  <i class="fas fa-pen"></i>
<% end %>

** Bouton Supprimer (poubelle) **

Couleur => Icône rouge => Corbeille

Supprimer


  <%= link_to  URL , class: "btn btn-danger text-white", :method => :delete do %>
    <i class="far fa-trash-alt"></i> 
  <% end %>

Sommaire

Il peut être compris en collectant des informations, mais comme il n'y avait pas de page cohérente, je l'ai résumé en sortie. Nous vous serions reconnaissants si vous pouviez vous y référer.

Supplément

** Mon échec ** J'ai couru les deux suivants et j'ai échoué.

** ① Incorporer de force dans la partie affichée **

python


  <%= link_to "Icône que vous souhaitez utiliser" ,URL %>
             ---------------             

** ② J'ai plongé de force dans la classe. ** **

  <%= link_to "Supprimer" ,URL, class:La classe de l'icône que vous souhaitez utiliser%>
                 -------------------------

J'ai fait la même erreur! Si vous pensez, veuillez vous référer à cet article! Lol

Matériel de référence

Recommended Posts

[Rails 6] Méthode spécifique d'incorporation de Font Awesome dans link_to [Copier OK]
Introduction et explication de l'utilisation de Font Awesome
[Order method] Définit l'ordre des données dans Rails
[Rails] Classement et pagination par J'aime
[Rails] [Docker] Le copier-coller est OK! Comment créer un environnement de développement Rails avec Docker
Résumé des commandes fréquemment utilisées dans Rails et Docker
Emplacement de la définition de la méthode Résumé de la vérification Lorsque défini dans le projet et Rails / Gem