AFFINGER5でSNSアイコンが表示されない時の対処法について

AFFINGER5でSNSアイコンを設定したけどうまく表示されない。

表示させる方法を知りたい。

そんな悩みにお答えします。

先日、SNSアイコンの設定をしたのにSNSのマークが表示されませんでした。

「プロフィールカード」や「記事の最後」に表示させているこのアイコンですね。

そこで今回は、SNSアイコンが表示されなかった時の対処法について解説していきます。

ではいきましょう！

SNSアイコンが表示されない問題が発生

先日、「AFFINGER5」を導入してSNSアイコンを設定してみたらアイコンが表示されませんでした。

また、記事の最後に表示しているアイコンも同じように表示されてませんでした。

SNSアイコンが表示されない原因

SNSアイコンが表示されない原因は、FontAwesomeの設定を行っていたからでした。

例えば、 や みたいなアイコンを表示できます。

詳しくはこちらの記事をご覧ください。

FontAwesomeを設定した際、「header.php」ファイルに必要なコードを追記していたため、今回のSNSアイコンが表示されませんでした。

ただし、上記で追加したコードは削除できないので他の改善策を考える必要があります。

ではその方法について見ていきましょう！

SNSアイコンを表示させる方法

SNSアイコンが表示されない原因がわかったので、表示させる方法を見ていきましょう。

SNSアイコンを表示させるには、追加CSSに次のコードを追加するだけです。

ちなみに追加CSSは次の手順で確認できます。

コードだけを追加すると、あとで確認したときになんで追記したか分からなくなるので、コメントもつけておきましょう。

ちなみに上記のコードはTwitterのアイコンを表示させるコードなので、Facebook等のアイコンを表示させるには別のコードが必要です。

1行目を変更するだけでOKなので、他のSNSアイコンも表示させたい方はTwitterと同じように追加しておきましょう！

これで「プロフィールカード」や「記事の最後」のSNSアイコンが表示されるようになりました。

SNSアイコンが表示されない時の対処法：まとめ

今回は、AFFINGER5で「プロフィールカード」や「記事の最後」に設定しているSNSアイコンが表示されないという問題と対処法について紹介しました。

最後にまとめておきましょう。

今回の原因は、FontAwesomeを利用する際に必要なコードを「header.php」に追加していたからでした。

FontAwesomeについて詳しく知りたい方は、こちらの記事をご覧ください。

追加CSSに次のコード追加することで対処できます。

Twitter以外のSNSアイコンを表示させたい場合は、コードの1行目だけ変更しましょう。

各SNSアイコンのコードは次のとおりです。

少しでも参考になれば幸いです。

プロフィールカードの設定方法もまとめてますので、こちらも参考にしていただければと思います。