Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

はじめに

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

対象

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

前提

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

ゴール

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

before
after.png

after
before.png

あなたの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.使用したいアイコンを探す
今回は、ゴミ箱アイコンを探し、選択します
ゴミ箱アイコンの検索.png

3.表示されているコードをコピーする
ゴミ箱アイコンのコードを取得.png

ここで取得したコードを③で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の部分はご自身でご記入ください)

これです↓

before.png

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

詳細
  <%= 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 %>

まとめ

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

補足

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

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

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

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

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

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

参考資料

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away