🐈

Font Awesome 5 Freeを使用する場合はspanタグにしないといけない話

に公開

テックアカデミーの実力判定テスト独学コンテンツ上級を練習していて、時間を取られるトラブルがありました。
タイトルの通り、Font Awesome 5 Freeを使用する場合は注意が必要という話です。

<span class="fa-solid fa-bars"></span>

<i></i>で囲むとイタリック体になってしまう

font-family: 'Font Awesome 5 Free';

フォントファミリーを指定しないと表示されない

font-weight: 700;

フォントウェイトを太字 値:700(またはエキストラボールド 値:800)にしないと表示されない

補足

×font-style: nomal

cssで!important指定しても、htmlの<i></i>タグの方の方が最強なので効果が無い

Font Awesome 5 Freeを使用する場合の注意点に特化した記事が見当たらないので書きました。
限定的なケースですがお役に立てれば幸いです。

Discussion