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

Rails

font-awesome-railsとは

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

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で用意されているアイコンはwebフォントアイコンといいます。
通常のアイコンは画像なので拡大するとぼやけてしまいますが、Font Awesomeのアイコンはwebフォントアイコンなので、フォントのように拡大してもそのまま綺麗に表示することができます。
またcssで色やサイズを指定できるのも特徴です。

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フォントアイコンです
・font-awesome-railsを使うと簡単にrailsでFont Awesomeを使うことができるようになります
・ヘルパーメソッドを使うと簡単にビューファイルにコードを書くことができます