【即解決】Font AwesomeのWebページ表示崩れが起きた時の対処法

Font AwesomeのWEBサイト表示崩れ 副業ブログ

こんばんは、ブルです。

フリーアイコンでおなじみFont Awesomeですが、「グローバルメニュー(カテゴリ)の前や見出しが文字だけでちょっと寂しい」という時に重宝しますよね。(有料版もあり)

そして使い方を調べていざ使おうと思ってFont Awesomeにアクセスしたら、なんだかWEBページの表示がおかしくて使えなかったなんてことはありませんでしたか?

今回はそんな方向けに、5秒で直せるWEB表示崩れの対処方法をご案内します。

※Font Awesomeのアイコン表示が縦長の長方形になってしまった場合の対処法は下記の記事よりご覧ください。(テーマCocoon利用の場合)

スポンサーリンク

Font AwesomeのWEBサイトがおかしくなった時の対処法(Google Chrome利用時)

Font Awesome日本語訳

まず、Font Awesomeにアクセスするとこのような画面になります。

そして、使いたいアイコンをクリックするわけですが、そうすると下記キャプチャのように表示が崩れる現象が起こるわけです。
(私の場合、Google Chrome利用時でした。)

Font AwesomeのWEBサイト表示崩れ

これではアイコンが使えない!と思ってそこであきらめた方は非常にもったいないです。

サイト表示崩れの原因は、英語が日本語に変換されている場合に起こります。

サイト表示崩れ修正手順
  1. Font Awesomeにアクセスする
  2. ページを開いた時に英語が日本語に翻訳されていたらアドレスバー右端にあるお気に入りの左にある翻訳アイコンをクリック(下記画像参照)
  3. 英語タブに切り替えし、「英語を常に翻訳」からチェックを外す
  4. ページの再読み込みを行うもしくは一度離脱してページを開きなおす⇒ページを開いた時文字が英語になっていればOK(下記画像参照)
Google翻訳をオフ
Google翻訳をオフに
Font Awesome
英語表記になっていればOK

Google自動翻訳をオンにされている方はこのような現象が起こるんですね。
まったく厄介なものです。

Internet ExplorerやFirefoxでも同じ現象が起こるという方は、まず翻訳がどうなっているか見てみるのがいいかもしれませんね。

Font Awesomeの使い方については下記の記事で取り上げていますのでぜひご覧ください。

コメント

タイトルとURLをコピーしました