フォントオーサム 表示されない で 文字化け した話* → ( テーマ:OPEN CAGE )

FontAwesomeを使っていて文字化けした。

FontAwesomeがうまく表示されない！

今日はこんな人に向けて、

私の体験談を元に、参考になる記事を書いていきます😊

フォントオーサム 表示されない メニューボタン*

今日は最近解消に時間のかかった不具合について書いていきます。

このエラーについては原因を突き止めるまでにかなり時間がかかりました。

使っているテーマは『OPENCAGE（オープンケージ）』です✨

FontAwesom 文字化け したら？ 原因と解消方法まとめ*

FontAwesomを使うとき、

プラグインをインストールして、ボタン１つで簡単に絵文字として使えるようにする方法もありますが、

私は、ブログのテーマエディターの画面に専用のコードを書くやり方をしています。

手順は、

ダッシュボード上の【外観】＞【テーマエディター】＞【header.php】に

FontAwesomのアイコンを読み込むためのコードを書き込むやり方。

ところが、このブログテーマ『オープンケージ』のアルバトロスでは、

【header.php】にFontAwesomのコードを貼り付けると

画面がこんな感じでSNSの連携ボタンと

問い合わせボタンが文字化け。

元のアイコンが消えてしまいます😫

スマホの画面からみると

こんな感じ・・💦

原因について調べてみたのですが、なかなかわからず、途方にくれることに・・😥

一度全プラグインを停止させてみましたが効果なし。

オープンケージの問い合わせ窓口に問い合わせると

『アルバトロスのデフォルト設定のFontAwesomと「WordPress Visual Icon Font」のプラグインがデータ競合していて表示不具合を起こしている』

ということでした。

【header.php】にコードを入力したのと同時に、

投稿画面からアイコンをボタン１つで入力できるよう

『Visual Icon Fonts』というプラグインを導入していたのですが、これが原因だったようです。

アルバトロスのデフォルト設定のFontAwesomは”Ver4.7.0”で、”Ver5.9.0”のコードも使えません。

【header.php】に入力したコードを消して『WordPress Visual Icon Font』のプラグインを停止させたところ・・

元通りになりました♪

そもそもアルバトロスのテーマではFontAwesomの”Ver4.7.0”のアイコンがデフォルト設定されているので【header.php】にはコードを入力する必要がなかったのです。

FontAwesomのサイトからアイコンのコードをコピーしてそのままテキストエディタに貼り付けてみると・・

もちろんコードを変えるだけで色をかえたり、動きをつけたり、大きさをかえたりもできます。

使い方詳細については別記事で書きますね。

＊これだけでおしゃれ♪かんたんFontAwesome＊

他の方のブログを読んでいると

簡単に設定できそう😃

と思って真似してみたのですが、WP超初心者のわたしは思うように使えるまで、

数週間もかかってしまいました。

使っているブログテーマとFontAwesomのVerの相性によってはうまく反映しないことがあるのでブログテーマによっては微調整が必要です。

『WordPress Visual Icon Font』とアルバトロスのテーマの相性についてはこちらのオープンケージ公式サイトの記事にも書いてありましたね。

同じアルバトロスのブログテーマを使用している方は、

こちらの記事を参考にして下さい。