カテゴリー
ホームページ製作

font awesome6をSCSSで使うときの注意点

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ファイルが軽くなります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です