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

Rails

font-awesome-sassとは

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

font-awesome-sassを使えるようにしよう
リンクをコピーしました

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

Gemfile
1
gem 'font-awesome-sass'

次に、app/assets/stylesheets/application.scssに下記を追記します。
application.cssを使っている場合はscssに変換しましょう。

application.scss
1
2
@import 'font-awesome-sprockets';
@import 'font-awesome';

このとき、下記のように順番を入れ替えて記述してしまうとアイコンは表示されないので注意が必要です。

application.scss
1
2
@import 'font-awesome';
@import 'font-awesome-sprockets';

アイコンを表示させてみよう
リンクをコピーしました

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

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

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

このように記述します。
接頭辞名はFont Awesomeのversion4までは「fa」で統一されていたのですが、version5から下記の5種類になり、アイコンごとに異なります。

分類 接頭辞
Solid fas
Regural far
Light fal
Duotone fad
Brands fab

アイコン名は公式サイトで調べることができます。

公式サイトを確認すると下のように使用できるアイコンの一覧が表示されます。
なお灰色になっているアイコン(PROと書かれているアイコン)は有料で使うことができます。

アイコン一覧

たくさんのアイコンがあるので、使いたいアイコンを検索すると見つけやすいです。
使用したいアイコンをクリックすると下の画像のように書くべきコードを調べることができます。

アイコン選択

clock

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

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

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

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

version5だと「10x」まで指定することができます。
また下記のように記述することもできます。

ビューファイル
1
2
3
4
5
6
7
8
# アイコンの大きさが0.75倍になる
<i class="接頭辞名 fa-アイコン名 fa-xs"></i>

# アイコンの大きさが0.875倍になる
<i class="接頭辞名 fa-アイコン名 fa-sm"></i>

# アイコンの大きさが1.333倍になる
<i class="接頭辞名 fa-アイコン名 fa-lg"></i>

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

ビューファイル
1
2
3
4
5
6
7
8
9
10
11
12
13
<i class="far fa-clock fa-xs"></i>
<i class="far fa-clock fa-sm"></i>
<i class="far fa-clock"></i>
<i class="far fa-clock fa-lg"></i>
<i class="far fa-clock fa-2x"></i>
<i class="far fa-clock fa-3x"></i>
<i class="far fa-clock fa-4x"></i>
<i class="far fa-clock fa-5x"></i>
<i class="far fa-clock fa-6x"></i>
<i class="far fa-clock fa-7x"></i>
<i class="far fa-clock fa-8x"></i>
<i class="far fa-clock fa-9x"></i>
<i class="far fa-clock fa-10x"></i>

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

よく使うアイコンの紹介
リンクをコピーしました

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

clock
リンクをコピーしました

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

html
1
<i class="far fa-clock"></i>

calendar-alt
リンクをコピーしました

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

html
1
<i class="far fa-calendar-alt"></i>

envelope
リンクをコピーしました

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

html
1
<i class="far fa-envelope"></i>

folder
リンクをコピーしました

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

html
1
<i class="far fa-folder"></i>

image
リンクをコピーしました

image
画像のアイコンです。

html
1
<i class="far fa-image"></i>

cog
リンクをコピーしました

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

html
1
<i class="fas fa-cog"></i>

twitter
リンクをコピーしました

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

html
1
<i class="fab fa-twitter"></i>

facebook-square
リンクをコピーしました

facebook-square
facebookのアイコンです。

html
1
<i class="fab fa-facebook-square"></i>

instagram
リンクをコピーしました

instagram
instagramのアイコンです。

html
1
<i class="fab fa-instagram"></i>

ヘルパーメソッドを使ってみよう
リンクをコピーしました

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

icon
リンクをコピーしました

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

ビューファイル
1
2
3
4
icon('接頭辞名', 'アイコン名')

# 例
<%= icon('far', 'clock') %>

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

ビューファイル
1
<i class="far fa-clock"></i>
まとめ

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