問題
頼まれて改善をし出したサイトなのですが、どれどれ。。
画像のような感じで、FacebookやInstaのアイコンが入りそうなところに四角が表示されていました。
他にも同じような場所があったので、原因をググってみると
・画像ではなくフォント
・Font-Awesomeが原因？
https://highfivecreate.com/blog/tips/2218.html
ということがわかりましたので、早速対応。
※ちなみにFont-Awesomeとは、ざっくり言うとウェブサイトやブログでWebアイコンフォントを表示してくれるサービスです。
https://fontawesome.com/?from=io
対処
サーバーの.htaccessにフォントを表示できるように設定を加えてあげればOKのようでした。
この記述です。
「 Header set Access-Control-Allow-Origin」のあとの「 "*"」この部分については、独自ドメインだと変化はなく「＊」とすることで改善できました。
<IfModule mod_headers.c>
http://blog.lowaivill.com/development/cross-domain/
<FilesMatch "\.(ttf|otf|eot|woff)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
結果
無事に表示できました！他にも四角になっていた部分がいくつかありましたが、解決しました！
Font-Awesomeが外部のサービスなので、外部から参照するのに許可をしてあげないといけないのかなーというざっくりと解釈しました。（間違っていたらすみません。。）
Font-Awesomeの使い方についてわかりやすい解説が以下のサイトだったので、参考までにご紹介します。