【Rails6】link_toにFontAwesomeを埋め込む具体的方法【コピペOK】

#はじめに
Railsで「link_toの削除ボタンをアイコンで作成したい」と思い、調べた内容をまとめました。

#対象
Railsで成果物を作り始めた人

前提

• bootstrapを導入済み
• 今回はrails6で進めています

#ゴール
link_toの表示を 「”文字” → ”アイコン”」 に変更します

before

after

あなたのlink_toの"文字"が"アイコン"になるまで

①"Font Awesome"の設定
②使用したいアイコンコードを取得
③「link_to」に"アイコン"を埋め込む

##①"Font Awesome"の設定
今回は参考資料の記事を参考にさせていただきました！
細かい設定も記載されているので、参考にしてください！
[【Rails】font-awesome-sassの使い方を徹底解説！]
(https://pikawaka.com/rails/font_awesome_sass)

1.font-awesome-sassの導入

Gemfile

gem 'font-awesome-sass'

ターミナル

bundle install

application.scss

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

2.font-awesome-railsの導入

ターミナル

brew install yarn

yarn add @fortawesome/fontawesome-free

app/javascript/packs/application.js

require("@fortawesome/fontawesome-free/js/all")

app/assets/stylesheets/application.scss

@import "@fortawesome/fontawesome-free/scss/fontawesome";

##②使用したいアイコンのコード取得

1.以下のリンクに移動
[Font Awesome]
(https://fontawesome.com/icons?d=gallery)

2.使用したいアイコンを探す
今回は、ゴミ箱アイコンを探し、選択します

3.表示されているコードをコピーする

ここで取得したコードを③でlink_toに埋め込みます
*上記画像の「このコードをコピペする」の部分が今回使用するコードになります

##③「link_to」に"アイコン"を埋め込む
方法
以下のコードに先ほど取得した「アイコンのコード」を埋め込みます

削除ボタンの場合

after

<%= link_to URLヘルパー, class: "btn btn-danger", HTTPメソッドの指定 do %>
   アイコンのコード  #=>　ここに挿入する   
<% end %>

例）
<%= link_to URLヘルパー, class: "btn btn-danger", method: :delete do %>
  <i class="far fa-trash-alt"></i> #=>　アイコンのコード
<% end %>

比較として、一般的に使用するlink_toも貼っておきます↓

before

<%= linl_to "削除" , URLヘルパー ,class: btn btn-primary, method: :delete %>

詳しい情報はこちらを参照ください。
[Railsドキュメント リンクを生成](htt
ps://railsdoc.com/page/link_to)

#テンプレート
最初に紹介した画像のコードを記載しておきます。
よかったら使用してください！(URLの部分はご自身でご記入ください）

これです↓

詳細ボタン（虫眼鏡)
色 => 青　 アイコン=> 虫眼鏡

詳細

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

編集ボタン（ペン）
色 => 緑　 アイコン=> ペン

編集

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

削除ボタン（ゴミ箱）

色 => 赤　　アイコン => ゴミ箱

削除

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

まとめ

情報を集めると理解できますが、まとまったページがなかったのでアウトプットとしてまとめした。
ご参考にしていただければ幸いです。

補足

私の失敗例
以下の２つを実行し、失敗しました。

①表示する部分に無理やり埋め込む

  <%= link_to "使用したいアイコン" ,URL %>
 　           ---------------             

②classに無理やり突っ込みました。

  <%= link_to "削除" ,URL, class:使用したいアイコンのクラス%>
　　　　　　　　　　　　　　　　 -------------------------

同じミスをした！と思った方は、ぜひこの記事を参考にしてください！笑

#参考資料

• [【Rails】font-awesome-sassの使い方を徹底解説！]
  (https://pikawaka.com/rails/font_awesome_sass)
• Rails4でlink_toの中にFont Awesomeのアイコンを埋め込む方法!!