[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
- Bootstrap installé
- Cette fois, nous procédons avec des rails 6
objectif
Changer l'affichage de link_to en "" caractère "→" icône ""
before
after
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
-
Allez sur le lien ci-dessous [Font Awesome] (https://fontawesome.com/icons?d=gallery)
-
Trouvez l'icône que vous souhaitez utiliser Cette fois, recherchez l'icône de la corbeille et sélectionnez-la
-
Copiez le code affiché
** Intégrez le code obtenu ici dans link_to dans in **
- La partie "Copier ce code" dans l'image ci-dessus est le code utilisé cette fois.
③ 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 ↓
** 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
- [[Rails] Explication approfondie de l'utilisation de font-awesome-sass! ] (https://pikawaka.com/rails/font_awesome_sass)
- Comment intégrer l'icône Font Awesome dans link_to dans Rails4 !!
Recommended Posts