電脳備忘録

font awesomeでSNSアイコンが表示されない時の対応策

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";
}

これに気がつくのに1時間ほど時間を取られた・・・。

投稿日
カテゴリ