すでにメンバーの場合は

無料会員登録

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

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

Pikawakaにログイン

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

Rails

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

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';

rails6にfont-awesome-railsを導入する方法

rails6では、webpackerを使ってcss jsをコンパイルしてます。yarnというパッケージ管理ツールを使ってfontawesomeのcss jsをインストールします。yarnからインストールしたcss jsをwebpackerを使ってコンパイルすることで、fontawesomeを使用することができるようになります。

yarnをインストールしていない人はまずyarnをインストールしましょう。

ターミナル | yarnのインストール
1
brew install yarn

続いて、fontawesomeをyarnを使ってインストールしましょう。

ターミナル | 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を読み込んでいきます。

app/javascript/packs/application.js | fontawesomeのjsを読み込み
1
import '@fortawesome/fontawesome-free/js/all';
app/assets/stylesheets/application.scss | fontawesomeのcssを読み込み
1
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

上記の記述でrails6の読み込みは完了です。

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

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

8

わかった!