Ruby on Rails 6にFont Awesome 5をYarnからインストールする方法

こんにちは、ザックス株式会社の開発担当のものです。

弊社ではRuby on RailsというWebアプリケーションフレームワークを使って、様々なWebアプリを開発しています。

例えばECアプリを開発していて、ふとカートのアイコンが欲しくなる瞬間ってありませんか。

『デザイナーに頼んで新たに画像を用意してもらう時間がない』

そんなときのために、Font Awesomeという1,500点以上のアイコンフォントが無料で使えるツールがあります。

これを使えば新たに画像を用意しなくても、カートのアイコンやSNSのアイコンなどを簡単かつスピーディーに実装することができます。

Font Awesome Freeアイコン一覧

今回はRuby on Rails 6に、Font Awesome 5をインストールする方法について解説します。

１．バージョン情報

各バージョンは以下のとおりです。

OS：CentOS8.2
Rails：6.0.3.3
Node.js：12.18.2
Yarn：1.22.5
Webpacker：4.3.0
Font Awesome: 5.14.0

2．前提条件

Ruby on Rails 6の開発環境の準備が済んでいる

※Pumaを起動してウェルカムページが見れるところまで、設定が済んでいること

Ruby on Rails 6の標準であるWebpackerが動作すること

※Yarn導入済み

3．Yarnを使ってFont Awesome 5をインストール

Railsアプリのルートディレクトリから以下のコマンドを実行します。

$ yarn add @fortawesome/fontawesome-free

4．SCSSファイルを用意する

WebpackerでビルドするSCSSファイルを用意し、先頭行にFont Awesomeをインポートするコードを追記します。

※ディレクトリ、ファイル名は任意です。

app/javascript/src/styles.scss

@import '~@fortawesome/fontawesome-free/scss/fontawesome';

5．application.jsを設定する

Webpackerで使用するapplication.jsに、Font AwesomeとSCSSファイルをインポートするコードを追記します。

app/javascript/packs/application.js

...
import '@fortawesome/fontawesome-free/js/all'
import '../src/styles.scss'

以上でFont Awesomeを使う準備ができました。

6．Font Awesome 5の使用例

Font Awesomeの動作確認も含め実際に使ってみましょう。

homeコントローラーとindexアクションを生成します。

$ bundle exec rails g controller homes index

カートボタンを作ってみましょう。

以下のURLにアクセスし、検索窓にcartと入力します。

shopping-cartを選択すると、以下の画面が表示されます。

赤枠で括っているタグをViewファイルにコピー&ペーストすれば、カートアイコンを表示することができます。

<i class="fas fa-shopping-cart"></i>

以下のViewファイルに、先ほどのコードを貼りつけます。

app/views/homes/index.html.erb

<h1>Homes#index</h1>
<p>Find me in app/views/homes/index.html.erb</p>
<a href="#" class="cart-btn"><i class="fas fa-shopping-cart"></i></a>

少しボタンらしくするためにCSSを書きます。

app/javascript/src/styles.scss

@import '~@fortawesome/fontawesome-free/scss/fontawesome';

.cart-btn {
  display: block;
  width: 80px;
  height: 80px;
  background-color: lightcoral;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: x-large;
  line-height: 80px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.24);
}

Rails serverコマンドでPumaを起動します。

$ bundle exec rails s -b 0.0.0.0

ブラウザからhttp://{サーバーのIPアドレス}:3000/homes/indexにアクセスしてみましょう。

カートボタンが表示されているか確認します。

Font Awesomeのアイコンフォント（カート）が表示されていますね。

7．最後に

今回はRuby on Rails 6に、Font Awesome 5をインストールする方法について解説してきましたが、いかがでしたでしょうか。

Font Awesomeのアイコンはバリエーションが豊かで、矢印やいいねをイメージするハートなども用意されています。

まだ使ったことがない方は、大変便利なので使ってみることをおすすめします。

最後までお読みいただきありがとうございました。

目次