すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

Rails

公開日:  |  最終更新日:

【Rails】 font-awesome-railsの使い方を徹底解説!

ぴっかちゃん
ぴっかちゃん

font-awesome-railsとは、無料で使えるwebフォントアイコンであるFont Awesomeを簡単にrailsで使えることができるようになるgemです。

使用例
1
<i class="fa fa-アイコン名" aria-hidden="true"></i>

Font Awesomeで用意されているアイコンはwebフォントアイコンといいます。

通常のアイコンは画像なので拡大するとぼやけてしまいますが、Font Awesomeのアイコンはwebフォントアイコンなので、フォントのように拡大してもそのまま綺麗に表示することができます。

またCSSで色やサイズを指定できるのも特徴です。

font-awesome-railsの使い方

この章では、font-awesome-railsの導入方法から使い方まで解説します。

font-awesome-railsを使えるようにしよう

まずはGemfileにgemを追加します。
下記のコードを追加してbundle installコマンドを実行しましょう。

Gemfile
1
gem 'font-awesome-rails'

次に、app/assets/stylesheets/application.cssに下記の記述をします。

application.css
1
#*= require font-awesome

application.cssではなくapplication.scssを使っているときは下記のように記述します。

application.scss
1
#@import "font-awesome";

これで準備は完了です。
ただし「font-awesome-rails」は最新版のfont-awesome5には対応していません。

その為、font-awesomeのversion5の一部のアイコンが表示されません。
version5に対応させたい場合は「font-awesome-sass」というgemを使用します。

アイコンを表示させてみよう

Font Awesomeのアイコンはビューファイルで下記のように記述すると表示させることができます。

ビューファイル
1
<i class="fa fa-アイコン名" aria-hidden="true"></i>

このように記述します。
アイコン名は公式サイトで調べることができます。

aria-hidden="true"はWebアクセシビリティ向上のために記述しています。
Webアクセシビリティとはwebサイトが体が不自由な人たちなどにとっても使うことができるのかという定義です。

※ここから下はこの記述を割愛します。

公式サイトを確認すると下のように使用できるアイコンの一覧が表示されます。

web application icons

使用したいアイコンをクリックすると下の画像のように書くべきコードを調べることができます。

アイコン

時計のアイコン

この場合だったら下記のように記述します。

ビューファイル
1
<i class="fa fa-clock-o"></i>

また下記のように記述するとアイコンの大きさを変えることができます。

ビューファイル
1
2
# アイコンの大きさが2倍になる
<i class="fa fa-アイコン名 fa-2x"></i>

また下記のように記述することもできます。

ビューファイル
1
2
# アイコンの大きさが1.333倍になる
<i class="fa fa-アイコン名 fa-la"></i>

実際に大きさを比べてみましょう。

ビューファイル
1
2
3
4
5
6
<i class="fa fa-アイコン名"></i>
<i class="fa fa-アイコン名 fa-la"></i>
<i class="fa fa-アイコン名 fa-2x"></i>
<i class="fa fa-アイコン名 fa-3x"></i>
<i class="fa fa-アイコン名 fa-4x"></i>
<i class="fa fa-アイコン名 fa-5x"></i>

上から順に下のように表示されます。

size

よく使うアイコンの紹介

Font Awesomeではたくさんのアイコンが用意されています。
その中でもよく使うアイコンを紹介してみます。

clock-o

時計のアイコンです。
時刻を表したいときなどに使用します。

clock-o

calendar

カレンダーのアイコンです。
日時を表したいときなどに使用します。

calendar

envelope-o

メールのアイコンです。
メールアドレスの横などに使用します。

envelope-o

folder-o

フォルダのアイコンです。

folder-o

picture-o

画像のアイコンです。

picture-o

cog

歯車のアイコンです。
設定のリンクのときなどに使用します。

cog

twitter

ツイッターのアイコンです。

twitter

facebook-official

facebookのアイコンです。

fa-facebook-official

instagram

instagramのアイコンです。

instagram

ヘルパーメソッドを使ってみよう

font-awesome-railsのgemには便利なヘルパーメソッドが用意されています。

fa_icon

アイコンの表示の記述を簡単に書くことができるヘルパーメソッドです。
下記のように記述します。

ビューファイル
1
<%= fa_icon "アイコン名" %>

上のコードは下記のコードにコンパイルされます。

ビューファイル
1
<i class="fa fa-アイコン名"></i>

サイズを指定したい場合は下記のように記述します。

ビューファイル
1
2
3
4
5
6
<%= fa_icon "アイコン名" %>
<%= fa_icon "アイコン名 lg" %>
<%= fa_icon "アイコン名 2x" %>
<%= fa_icon "アイコン名 3x" %>
<%= fa_icon "アイコン名 4x" %>
<%= fa_icon "アイコン名 5x" %>

fa_stacked_icon

2つのアイコンを重ねて表示することができるヘルパーメソッドです。

ビューファイル
1
<%= fa_stacked_icon("アイコン名", base: "アイコン名") %>

例えば下記のように記述します。

ビューファイル
1
<%= fa_stacked_icon("twitter", base: "square-o") %>

square-oは下のアイコンです。

square-o

twitterは上で紹介したアイコンですね。

上のように記述すると2つのアイコンが重なって下記のようなアイコンが表示されます。

fa_stacked_icon

上のコードを逆にしてみます。

ビューファイル
1
<%= fa_stacked_icon("square-o", base: "twitter") %>

すると下記のようなアイコンが表示されます。

twisqu

baseで指定したアイコンが基準になると覚えておきましょう。他にもこちらの書籍では、複数人での開発体制やテストコードの書き方など実際の開発現場でも役に立つ内容が解説されているのでおすすめです。

この記事のまとめ

  • Font Awesomeは無料で使えるwebフォントアイコンだよ
  • 簡単にrailsでFont Awesomeを使うことができるようになる
  • ヘルパーメソッドを使うと簡単にビューファイルにコードを書くことができる