Einführung

Ich dachte "Ich möchte eine Löschschaltfläche für link_to mit einem Symbol erstellen" in Rails, also fasste ich zusammen, was ich untersucht habe.

Ziel

Diejenigen, die angefangen haben, Artefakte mit Rails herzustellen

Annahme

Installierter Bootstrap
Diesmal fahren wir mit Schienen 6 fort

Tor

Ändern Sie die Anzeige von link_to in "" Zeichen "→" Symbol ""

before

after

Bis das "Zeichen" Ihres link_to zu einem "Symbol" wird

① Einstellung "Font Awesome" ② Holen Sie sich den Symbolcode, den Sie verwenden möchten ③ Betten Sie "icon" in "link_to" ein

① Einstellung "Font Awesome"

Diesmal habe ich auf den Referenzmaterialartikel verwiesen! Detaillierte Einstellungen werden ebenfalls beschrieben, bitte beziehen Sie sich darauf! [[Rails] Ausführliche Erklärung zur Verwendung von font-awesome-sass! ]] (https://pikawaka.com/rails/font_awesome_sass)

** 1. Einführung von font-awesome-sass **

`Gemfile`


gem 'font-awesome-sass'

`Terminal`


bundle install

`application.scss`


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

** 2. Einführung von 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';

② Holen Sie sich den Code des Symbols, das Sie verwenden möchten

Gehen Sie zu dem Link unten [Font Awesome] (https://fontawesome.com/icons?d=gallery)
Suchen Sie das Symbol, das Sie verwenden möchten Suchen Sie diesmal nach dem Papierkorbsymbol und wählen Sie es aus
Kopieren Sie den angezeigten Code

** Betten Sie den hier erhaltenen Code in link_to in ③ ein **

Der Teil von "Diesen Code kopieren" im obigen Bild ist der diesmal verwendete Code.

③ Betten Sie "icon" in "link_to" ein

Methode Betten Sie den zuvor im folgenden Code erhaltenen "Symbolcode" ein

Zum Löschen

`after`


<%= link_zum URL-Helfer, class: "btn btn-danger",HTTP-Methodenspezifikation tun%>
Symbolcode#=>Hier einfügen
<% end %>

Beispiel)
<%= link_zum URL-Helfer, class: "btn btn-danger", method: :delete do %>
  <i class="far fa-trash-alt"></i> #=>Symbolcode
<% end %>

Zum Vergleich werde ich auch den häufig verwendeten link_to ↓ posten

`before`


<%= linl_to "Löschen" ,URL-Helfer,class: btn btn-primary, method: :delete %>

Klicken Sie hier für weitere Informationen. Rails Document Link generieren (htt) ps://railsdoc.com/page/link_to)

Vorlage

Ich werde den Code des zuerst eingeführten Bildes schreiben. Bitte benutzen Sie es, wenn Sie möchten! (Bitte füllen Sie den URL-Teil selbst aus)

Das ist ↓

** Detailschaltfläche (Lupe) ** Farbe => Blaues Symbol => Lupe

`Einzelheiten`


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

** Schaltfläche Bearbeiten (Stift) ** Farbe => Grünes Symbol => Stift

`Bearbeiten`


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

** Schaltfläche Löschen (Papierkorb) **

Farbe => Rotes Symbol => Papierkorb

`Löschen`


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

Zusammenfassung

Es kann durch das Sammeln von Informationen verstanden werden, aber da es keine zusammenhängende Seite gab, habe ich sie als Ausgabe zusammengefasst. Wir würden uns freuen, wenn Sie sich darauf beziehen könnten.

Ergänzung

** Mein Versagen ** Ich lief die folgenden zwei und scheiterte.

** ① In das angezeigte Teil zwangsweise einbetten **

`python`


  <%= link_to "Symbol, das Sie verwenden möchten" ,URL %>
 　           ---------------

** ② Ich stürzte mich gewaltsam in die Klasse. ** **.

  <%= link_to "Löschen" ,URL, class:Die Klasse des Symbols, das Sie verwenden möchten%>
　　　　　　　　　　　　　　　　 -------------------------

Ich habe den gleichen Fehler gemacht! Wenn Sie denken, lesen Sie bitte diesen Artikel! Lol

Referenzmaterial

[[Rails] Ausführliche Erklärung zur Verwendung von font-awesome-sass! ]] (https://pikawaka.com/rails/font_awesome_sass)
Einbetten des Font Awesome-Symbols in link_to in Rails4 !!