この記事で書きました、SNSボタン絵文字フォントが表示されない問題。
お困りの方、結構いらっしゃるようで・・・。
私のサイトでは、以下の画像のように、特定のアイコンが四角の変な表示になってしまいます。
 こんな現象の方、WEB上に結構いらっしゃる。   |
私のサイトでは結局「諦める」という事で、この件に終止符を打つ事にしました。
そんなヒトが書くものは信憑性が無いものかも知れませんが、
同じような現象でお困りの方は試してみて下さい。
何れも解決した方のレスや記事を読み行った方法ですので、
(「改善した」「元に戻った」「表示されるようになった」と仰せの方々が試された方法)
私の環境では改善していなくても貴方(貴女)の環境では改善するかも知れません。
解決策のまとめなので、トライしてみて下さい～。
解決された方々の様に、ちゃんと表示される様になりますよーに!!
因みに、私は「絵文字フォント」とか「絵文字アイコン」と言っていますが、
広くは「アイコンフォント」と言われています。
其々の項目を試す度に必ずする事
都度キャッシュを削除(ブラウザーの履歴を削除)するようにします。
普段使用するブラウザーと異なるブラウザーでも確認してみます。
他のプラグインとの競合を疑う
- WordPress Visual Icon Fonts というプラグインを入れている場合は、一度停止してみる。
- キャッシュ系のプラグインを停止してみる。
- 一つ一つプラグインを除外しつつチェックする。
- Jetpackとの競合を疑うのは正論だと思いますが、
Jetpackを停止すると、サイト統計が切れますので、止めない方が賢明です。
(私は止めてテストしているのでエライ事になってます。)
プラグインとの競合のテストを行う場合は、つい忘れがちになりそうですが
都度キャッシュを削除(ブラウザーの履歴を削除)するようにします。
また、普段使用するブラウザーと異なるブラウザーでも確認してみます。
font-awesomeのCDNを参照する
こちら⇓の記事をご案内します。(わいひらさんも紹介されていた記事です)
特定の環境でFont-Awesomeが表示されない時の対処法
以下の記述を header.phpに書くのですが、
Simplicityの子テーマを使っている方は、header-insert.phpに入力します。
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Get Started with Font Awesomeに指定の参照ファイル、及び方法が記載されています。
※但しこの方法ですと、わいひら氏のfeedlyアイコンは表示されないそうです。
.htaccessを編集する
こちら⇓の記事をご案内します。(こちらもわいひらさんも紹介されていた記事です)
クロスドメイン制約によりFirefoxでFont AwesomeなどのWEBフォントを表示できない場合の設定
外部ドメインからのフォントファイルへのアクセスを許可させる。という方法。
.htaccessは書き間違えると命とりになりかねないので、
編集前にコピーするなりして元ファイルを保存しておきましょう。
上記サイトの書き方とちょっとだけ異なりますが、
サーバーが他のドメインからの参照を許可してない時、
(つまり、クロスドメイン。因みに私の所では関係ない模様・・・でも疑いまくってやってみましたよ～)
フォントを置いているディレクトリ直下フォルダに.htaccessのファイルを入れてみる。
https://mitemita.comの部分は、許可したいURLに置き換えます。
<ifmodule mod_headers.c="">
<filesmatch "¥.(ttf|otf|eot|woff)$"="">
Header set Access-Control-Allow-Origin "https://mitemita.com"
</filesmatch>
</ifmodule>.htaccessとproxy.phpを入れてみる
これも、、、私の環境では、関係ないと思ったのですが、やってみた事の一つです。
【助けて】さくらのサーバーだとIE9以降でwebfontが文字化けする
この↑サイトに記載されている内容を、Simplicityでフォントを置いてある場所、二か所に入れてみた。
ヒントになった書き込み↓
Font Awesomeアイコンが表示されません
場所
/wp-content/themes/simplicity/webfonts/fonts/
/wp-content/themes/simplicity/webfonts/icomoon/fonts/
/wp-content/plugins/font-awesome-4-menus/fonts/ (Font Awesome 4 Menusも駄目な場合)
入れるファイル
♦.htaccess
<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType font/woff .woff
RewriteEngine on
RewriteBase /
RewriteRule (.*).(eot|eot#iefix|ttf|otf|woff)$ 自分の環境下、公開フォルダからのパスを書く/proxy.php?url=$1.$2 [L]♦proxy.php
<?php
header("Access-Control-Allow-Origin: *");
readfile($_GET['url']);
?>cssで使うアイコンだけ別名のclassを定義する
以下の記事も参考にしてトライしてみました。(これも関係ないっちゃー関係ないんだけど…)
Font Awesomeの一部のソーシャルアイコンが表示されない
このサイトにリンクされていたfont-awesome.cssファイルからcontentを拾って、
Google＋のアイコンを表示させようとした。
.your-fa-google-plus:before {
content: "f0d5";
}その他
参考までに、こういうこと↓もあるそうです。
最後に
如何でしたでしょうか?
表示されましたか?
上記、其々の方法で実際に改善されたという方からの情報で色々とやってみました。
残念ながら、私の環境ではNGだったのですが、
デモサイトの方では、サーバー同じで入れているプラグインも同じで、
何にもしなくっても、ちゃんと表示されているので、あと疑うのは、、、記事ぐらいでしょうか(笑)
(DEMOサイトには記事が「はろーわーるど。」しかないから(笑)
私の様に、残念ながら解決しなかった場合、
「テーマカラータイプ（高速）・Twitterタイプ（高速）・
バイラルタイプ（高速）・バイラル白タイプ（高速）」
を諦めて「デフォルト（サービス固有のボタン）」を設定されては如何でしょうか。
「デフォルト（サービス固有のボタン）」だと、シェア数「0」が表示されるので、
すごーく嫌なんですけど、シェアして貰える様になる様に頑張る。って事で我慢する事にしました😓
2015/12/12追記・その後12月9日、解決しました。
コメント
[…] SimplicityのSNSボタン絵文字が表示されない時のチェック-解決策があるかも?! | みてみた […]
[…] https://mitemita.com/check-emoji-icon/ […]
[…] SimplicityのSNSボタン絵文字が表示されない時のチェック-解決策があるかも?!… […]