本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。
この記事は最終更新から5年以上経過しています。
font awesomeで擬似要素でアイコンを表示しようとしが、表示されない。
cssのリンクも間違っていないし、font-weightも設定しているにも関わらず表示されない。
a.facebook::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f099";
}
原因を調べている中で表示されるアイコンと表示されないアイコンがあることがわかった。
表示したかったのはtwitterアイコンとFacebookアイコンなのだけれど、SNSアイコンが軒並み表示されない。
ストレスと戦いながらさらに調査を進めようやく解決に至った。
原因はfont-familyの設定で、企業とかサービス？のアイコンを使用する場合はFreeではダメでBrandsと指定しなければならないらしい。
a.facebook::before {
font-family: 'Font Awesome 5 Brands';
font-weight: 900;
content: "\f099";
}
これに気がつくのに１時間ほど時間を取られた・・・。