[CSS] [FontAwesome] TwitterやInstagramなどの企業ロゴアイコンがbefore/afterの疑似要素で表示されない

公開日:2023/06/20

FontAwesome（フォントオーサム）でTwitterやInstagram、Facebookなどの企業ロゴアイコンを使おうとした際、before/afterの疑似要素でうまく表示されずはまってしまったので備忘録を残しておきます。

原因：font-familyの指定が間違っていた

.mail::before {
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0e0";
}

通常、フォントアイコンをbefore疑似要素で使用する際はこのような書き方になります。

ですが、TwitterやFacebookといった企業ロゴのアイコンは「font-family」を「Font Awesome 5 Free」ではなく「Font Awesome 5 Brands」にする必要があります。

また、「font-weight」も「900」や「bold」にする必要はないようです。設定すると線の太いアイコンになってしまうので、無指定のままでOKです。

参考までに、Instagram、Twitter、Facebookそれぞれの記載方法を書いておきます。

.instagram::before {
    display: inline-block;
    font-family: "Font Awesome 5 Brands";
    content: "\f16d";
}

.twitter::before {
    display: inline-block;
    font-family: "Font Awesome 5 Brands";
    content: "\f099";
}

.facebook::before {
    display: inline-block;
    font-family: "Font Awesome 5 Brands";
    content: "\f09a";
}

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。