[CSS ] [Font Awesome] バージョン別before/after疑似要素での使い方

とても便利なサービスですが、バージョンによってCSSのbefore/after疑似要素の書き方が微妙に異なります。一昔前に作られたサイトはFont Awesome 4を使っているケースもあると思います。

本記事ではFont-Awesomeのバージョンごとの使用方法をまとめました。

Font Awesome 5

.fa_icon::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f054";
}

.fa_icon::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f054";
}

バージョン5では「font-weight: 900;」の指定が必要になります。

バージョン5のアイコン一覧はこちら。

.fa_icon::before {
    font-family: FontAwesome;
    content: "\f054";
}

.fa_icon::after {
    font-family: FontAwesome;
    content: "\f054";
}

バージョン4のアイコン一覧はこちら。

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

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