fontawesome6をSCSSで使用する

ファイルのダウンロード

fontawesomeのダウンロードページからFor The WebのFree For Webからファイルをダウンロードする

ディレクトリ

ダウンロードしたファイルを解凍すると以下のようなディレクトリになっているかと思います。

fontawesome-free-6.1.1-web
├ css
├ js
├ less
├ metadata
├ scss
├ sprites
├ svgs
├ webfonts
└ LICENSE.txt

SCSSをよく読んでないのであれですが、恐らく使うファイルはscssとwebfontぐらいだと思いますがわからなければすべて自分のcssフォルダに移しまししょう。

今回は以下のように設置します。

css
├ fontawesome-free-6.1.1-web
│ ├ css
│ ├ js
│ ├ less
│ ├ metadata
│ ├ scss
│ ├ sprites
│ ├ svgs
│ ├ webfonts
│ └ LICENSE.txt
└ common.scss

SCSS編集

common.scss

$fa-font-path: "./fontawesome-free-6.1.1-web/webfonts";
@import "./fontawesome-free-6.1.1-web/scss/fontawesome.scss";
@import "./fontawesome-free-6.1.1-web/scss/solid.scss";
@import "./fontawesome-free-6.1.1-web/scss/brands.scss";

common.scssに上記を記述してください。ファイルの設置個所が違う場合は読み込めるように書き直してください。
$fa-font-pathはfontawesome-free-6.1.1-webの中のwebfontsまでのパスを書いてください。
$fa-font-pathのパスが間違っている場合はページでアイコンの表示が□になっており、検証ツールのconsoleに

GET file:///C:/[使用しているパス]/fontawesome-free-6.1.1-web/webfonts/fa-brands-400.ttf net::ERR_FILE_NOT_FOUND

のようなエラーが出るのパスを正しく入力してください。