FontAwesomeの導入

FontAwesomeの導入していこう！

無料で使えるフォントがあります！そのなかでFontAwesomeが使いやすいかな
と思いますので導入方法紹介したいと思います

インストール方法

①下記のコマンドを打ちインストールしていきます

$ yarn add @fortawesome/fontawesome-free@5.15.4

インストールされたらこんな感じで表示されると思います。

yarn add v1.22.19
warning ../../package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @fortawesome/fontawesome-free@5.15.4
info All dependencies
└─ @fortawesome/fontawesome-free@5.15.4
Done in 6.45s.

②import '@fortawesome/fontawesome-free/js/all'をapp/javascript/packs/application.jsに追加記述

app/javascript/packs/application.js

import "bootstrap";
import "../stylesheets/application" 
import '@fortawesome/fontawesome-free/js/all'  #追加してください

③@import '~@fortawesome/fontawesome-free/scss/fontawesome';
をapp/javascript/stylesheets/application.scssに追加記述

app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';  #追加してください

これでFontAwesomeを使える準備が完了です。