目的

Railsで作成したアプリにFont Awesomeを導入する。

開発環境

macOS: Big Sur
Rubyバージョン: 2.6.5
Railsバージョン: 6.0.0

アイコンをアイコンフォントという文字として使うことができるツールの事です。
有料のアイコンもありますが、基本無料で使用できるので気軽に使用できます。

それでは早速始めていきます!
まず下記コマンドでFont Awesomeをインストールをします。

ターミナル

% yarn add @fortawesome/fontawesome-free

次にFont Awesomeを使用するための設定をしていきます。
下記のように記述しましょう！

app/javascript/stylesheets/application.scss

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

デフォルトではapplication.scssは存在しなく、application.cssになっているので、
ご自身で書き換えてください！

次にjsファイルの設定です。

app/javascript/packs/application.js

import '@fortawesome/fontawesome-free/js/all';

これで、Font Awesomeを使う準備ができました！

ここまで実装できたら導入できているか、確認してみます。
ビューファイルに下記コードを貼り付けてみましょう！

app/javascript/packs/application.js

<i class="fas fa-arrow-right"></i>

ビューを確認し、「→」が表示されたら成功です！
あとは公式HPから好きなアイコンを見つけて、コードをコピペすればOKです！
Font Awesome

ちなみにCSSでサイズやカラーなども編集可能ですので、ぜひお試しください。

以上でFont Awesomeの導入は完了です。
簡単に導入できて便利に使えるのでぜひ試してみてください。
では。