更新日:
【Rails】 font-awesome-sassの使い方を徹底解説！
font-awesome-sassとは、無料で使えるwebフォントアイコンであるFont Awesomeを簡単にrailsで使えることができるようになるgemです。
font-awesome-sassの使い方
この章では、font-awesome-sassの導入方法から使い方まで解説します。
font-awesome-sassを使えるようにしよう
fontawesomeをRailsで使えるようにする方法について説明していきます。
Rails5とRails6ではfontawesomeの導入の仕方が異なるので、それぞれのバージョンで導入する方法について説明します。
Rails5にfont-awesome-railsを導入する方法
まずはGemfileにgemを追加します。
下記のコードを追加してbundle installコマンドを実行しましょう。
1
gem 'font-awesome-sass'
次に、app/assets/stylesheets/application.scssに下記を追記します。
application.cssを使っている場合はscssに変換しましょう。
1
2
@import 'font-awesome-sprockets';
@import 'font-awesome';
このとき、下記のように順番を入れ替えて記述してしまうとアイコンは表示されないので注意が必要です。
1
2
@import 'font-awesome';
@import 'font-awesome-sprockets';
Rails6にfont-awesome-railsを導入する方法
Rails6では、Webpackerを使ってcss jsをコンパイルしてます。yarnというパッケージ管理ツールを使ってfontawesomeのcss jsをインストールします。yarnからインストールしたcss jsをWebpackerを使ってコンパイルすることで、fontawesomeを使用することができるようになります。
yarnをインストールしていない人はまずyarnをインストールしましょう。
1
brew install yarn
続いて、fontawesomeをyarnを使ってインストールしましょう。
1
2
3
4
5
6
7
yarn add @fortawesome/fontawesome-free
success Saved 1 new dependency.
info Direct dependencies
└─ @fortawesome/fontawesome-free@5.13.0
info All dependencies
└─ @fortawesome/fontawesome-free@5.13.0
上記のように表示されると無事インストールできています。
続いてfontawesomeのcssとjsを読み込んでいきます。
1
import '@fortawesome/fontawesome-free/js/all';
1
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
上記の記述でRails6の読み込みは完了です。
Webpackerとは、フロントエンドの開発をサポートするWebpackをRuby on Railsで使用するためのgemパッケージのことです。Webpackerの使い方は、こちらの書籍でかなり詳しく解説されています。体系的に学びたい方におすすめの良書です。
アイコンを表示させてみよう
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と書かれているアイコン）は有料で使うことができます。
たくさんのアイコンがあるので、使いたいアイコンを検索すると見つけやすいです。
使用したいアイコンをクリックすると下の画像のように書くべきコードを調べることができます。
この場合だったら下記のように記述します。
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
時計のアイコンです。
時刻を表したいときなどに使用します。
1
<i class="far fa-clock"></i>
calendar-alt
カレンダーのアイコンです。
日時を表したいときなどに使用します。
1
<i class="far fa-calendar-alt"></i>
envelope
メールのアイコンです。
メールアドレスの横などに使用します。
1
<i class="far fa-envelope"></i>
folder
フォルダのアイコンです。
1
<i class="far fa-folder"></i>
image
画像のアイコンです。
1
<i class="far fa-image"></i>
cog
歯車のアイコンです。
設定のリンクのときなどに使用します。
1
<i class="fas fa-cog"></i>
ツイッターのアイコンです。
1
<i class="fab fa-twitter"></i>
facebook-square
facebookのアイコンです。
1
<i class="fab fa-facebook-square"></i>
instagramのアイコンです。
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フォントアイコンだよ
- 簡単にRailsでFont Awesomeを使うことができる
- ヘルパーメソッドを使うと簡単にビューファイルにコードを書くことができる
