Font Awesome5の使い方
雑多なメモ
(あとで書き直す予定…)beco.icon
scssファイルで使う場合
クラスごとにfont-familyを指定しているscssが分かれているのでこちらも呼び出す必要がある
メイン
fontawesome.scss Main Font Awesome compile
font-familyの指定
呼び出せてなくて表示できなくてめっちゃ悩んだ…beco.icon
公式よく読んだら書いてあったbeco.icon
brands.scss Brand icon styles
solid.scss Solid icon styles
regular.scss Regular icon styles
light.scss Light icon styles
フォントファイルのコピーを忘れずに
メインのstyle.cssがある1階層上に webfonts ディレクトリを作ってそこにフォントのファイルをコピーする。
デフォルト指定だと、以下のとおりなため。
$fa-font-path: "../webfonts";
HTML側で呼び出す
<i class="far fa-icon-code"></i>
far は fa の regular の太さ
fas は fa の solid
fab は fa の brands の種類(サービスのロゴとか)
(サンプルに aria-hidden="true" ないけど書いたほうが良さそう beco.icon
参考:アクセシビリティ関連のトピックス
4から5にバージョンアップする場合
クラス名が変更になっているので書き換える必要がある。
4で言うところの fa が 5 では fab far fas fal に分かれた。
が、5 に4の互換ファイルが存在しているっぽい。→ fa が使える
css のファイルサイズが増えてしまう弱点。
参考