【Font Awesome】Twitterアイコンが表示されない時の解決方法

こんにちは。
いたみけいこ（‎@keiko_itami）です。
最近ブログのカスタマイズをしています。

この記事では

という疑問の解決方法を紹介します。

Font AwesomeでTwitterを表示させたい時のcssコード

こちらのコードをcssに記述します。

.icon::before {
font-family: "Font Awesome 5 Brands";
font-weight: 400;
content: "\f099"
}

間違いやすいところは赤文字で書いています。

間違えやすいのは以下の箇所です。

順に見ていきましょう。

私はここを間違えていました。

font-family: “Font Awesome 5 Brands”;

font-family: “Font Awesome 5 free”;

Twitterアイコンは「Font Awesome 5 Brands」でした。

StyleがBrandsだとweightは400ですので、
font-weight: 400;
と記述してください。

これでも表示されない人は、Cocoon設定も見直しましょう。

と進みます。

全体タブの真ん中あたりで設定します。

こちらでFont Awesome 5を選択しておきましょう。

カスタマイズしてみやすいサイトにしましょう！