railsのbutton_toメソットにfont Awesomeを適用する方法

3054 ワード
button_to Rails FontAwesome Rails テキストリンク

はじめに

railsでポートフォリオを作っていて、計画していた機能要件が一通り終わったので、少しデザインを整えてみようということになりました。
手始めにイイねボタンを整えようと思い、Font Awesomeを使うことにしました。
Font AwesomeはCSSでウェブアイコンを簡単に導入できるツールです。

Font Awesomeをhtmlファイルで使う方法

Font Awesomeを使う下準備です。

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
</head>

headタグにこのように記述します。
hamlファイルで使うときは手順が異なるようなので、こちらの方の記事をご参照ください。

button_toメソッドに適用する

まず、Font Awesomeのホームページに行き、使いたいアイコンを探し、コードをコピーします。

そして、このように記述します。

<%= button_to article_likes_path(@article),class: "btn btn-primary", method: :post do %>
  <i class="far fa-heart"></i>イイね
<% end %>

すると、こんな感じに少しは見た目が整ったイイねボタンが出来上がります。（bootstrapを導入しているので、class="btn btn-primary"で青くなっています"）

抽象化するとこんな感じです。

<%= button_to URL, クラス, HTTPメソッドの指定 do %>
  <i class="使いたいアイコンのコード"></i>ボタンに表示する文字 #なくてもよい
<% end %>

・button_toの後ろに、ボタンに入れたい文字を記入する
・button_toとURLの間にカンマを入れる
などするとエラーになってしまうので気を付けてください。

おわりに

button_toに適用する新しめの記事がヒットしなかったので、アウトプットとして書いてみました。
Font Awesomeは無料でも洗練されたデザインのアイコンがたくさんあるので、積極的に使っていこうと思います！