font awesome6をscssで使ってみたら、正しく理解してないところがあった。とりあえずダウンロード。今日現在は、6.4.0だった。
下記のサイトの通りであるが、分かりにくかったところ。
https://qiita.com/sota_shimizu/items/8746aaf0c2d29bcba6e2
ポイント
- $fa-font-pathは、cssファイルから、webfontsまでのパスを書くこと。
- webfontsファイルも一緒にサーバーにアップロードすること。
$fa-font-path:”../webfonts”;と書かれているが、実際にcssファイルが置かれているところからwebfontのパスが違えば変更すること。_variables.scssに書く必要もない。
index.htmlファイルはこんな感じ。
scssファイルはこんな感じ。cssファイルからwebfontsへのパスを正しく書く。疑似要素の書き方は、以前とさほど変わらず。
index.htmlのフォルダ構成はこんな感じ。cssファイルも同じフォルダに置いた。webfontsファイルは、ダウンロードしたfontawesomeファイルにあるので、コピーした。
index.htmlファイルを開いてみます。
無事、font awesome6のアイコンが反映されてました。unicodeを使っても、アイコンが反映されてました。
それから、_variables.scssの不要なところを削除すると、作られるcssファイルが軽くなります。