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を使える準備が完了です。