ミギムキ

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

フォントアイコンといえばFont Awesome(フォントオーサム)です。

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

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

Font Awesome 5

before

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

after

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

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

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

Font Awesome 4

before

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

after

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

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

ご質問など受け付けています

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

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