【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コマンドを実行しましょう。

1
gem 'font-awesome-rails'

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

1
#*= require font-awesome

application.cssではなく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サイトが体が不自由な人たちなどにとっても使うことができるのかという定義です。

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

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

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

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

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>

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

よく使うアイコンの紹介

リンクをコピーしました

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

clock-o

リンクをコピーしました

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

calendar

リンクをコピーしました

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

envelope-o

リンクをコピーしました

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

folder-o

リンクをコピーしました

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

picture-o

リンクをコピーしました

画像のアイコンです。

cog

リンクをコピーしました

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

twitter

リンクをコピーしました

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

facebook-official

リンクをコピーしました

facebookのアイコンです。

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は下のアイコンです。

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

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

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

1
<%= fa_stacked_icon("square-o", base: "twitter") %>

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

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

役に立ったらSHARE♪

• twitter
• facebook
• はてブ