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

9805 ワード
Rails6 Rails FontAwesome 初心者 link_to Rails テキストリンク

はじめに

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

対象

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

前提

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

ゴール

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

before

after

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

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

①"Font Awesome"の設定

今回は参考資料の記事を参考にさせていただきました！
細かい設定も記載されているので、参考にしてください！
【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

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ドキュメント リンクを生成

テンプレート

最初に紹介した画像のコードを記載しておきます。
よかったら使用してください！(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:使用したいアイコンのクラス%>
　　　　　　　　　　　　　　　　 -------------------------

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

参考資料