• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

ハイファイブクリエイト

東京都を拠点にしたWebサイト制作。WordPress構築やシステム構築、ウェブコンサルティング

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / 特定の環境でFont-Awesomeが表示されない時の対処法

特定の環境でFont-Awesomeが表示されない時の対処法

池田祐太郎 | 2014年10月7日 公開

Font Awesome the iconic font and CSS toolkit
アイコン表示において、便利なFont-Awesome。
使い方はいろんなブログが解説しているので省きますが、WordPressテーマ「PlaneWhite」において、特定の環境でFont-Awesomeが表示されないというご報告をいただきました。

PlaneWhiteにおいてFont-Awesomeを使用している箇所はヘッダーのFacebook, メール, 電話といったアイコンです。

Sns icon success

これは「画像ではなくてフォントファイルとして読み込んでいる」箇所となります。
画像ではないので大きさも色も自由、スマホの高解像度にも対応、と便利なんですね。

しかし、特定の環境下で表示できないとのご連絡をいただきました。

特定のサーバーとブラウザで不具合

・Windows
・Hetemlサーバー
・chrome / Firefox / IE

確認した限りですが、上記の組み合わせでfont-awesomeが非表示、もしくは文字化け?として正常に確認できませんでした。

Sns icon error

このようになってしまいます。

これでは困るので、原因を調べてみたところ「CORS(Cross-Origin Resource Sharing)」というのが問題でした。
簡単に言うとCORSとは「異なるサーバ間でデータをやりとりする仕組み」です。詳しい解説はこちらをどうぞ。

このサーバーはさくらサーバーを使用しておりテストサイト構築の際はエラーは起きていませんでしたが、Hetemlサーバーを確認したらばっちり拒否されていました。

CDNを参照して解決

サーバーにダウンロードしたfont-awesomeのcssファイルを参照する際に、CDNを参照すれば解決できました。
以前は以下のようにダウンロードしたCSSを参照していましたが


これを、Bootstrapが提供している指定の参照ファイルへ直接参照します。


FontAwesomeのサイトに方法が書いています。使い勝手を考えてダウンロード方式にしましたが、CORSの問題があるのでこれからは参照方式にすることにします。
Get Started with Font Awesome

※新しいバージョンだとCDNのサーバーが別のようですが、どちらでも大丈夫でしょう

しかし不思議なのはMacで確認したところ問題が起きなかったという点。。。
ちょっと疑問に残るところです。

WordPressサイト構築

カテゴリー:TIPS

池田祐太郎

Webディレクター、フロントエンドエンジニア、ハイファイブクリエイト代表。音楽は聴くのも弾くのも好き。マイギターはFender American Vintage StratrocasterとGibson J-45。SNS: Twitter, Facebook

この記事と関連する記事

1度見たらもう見れない。重要な情報を安全に共有するツール 1ty.me
2019年8月2日
タグ: ツール
カテゴリー: TIPS
スパム防止のためメールアドレスを暗号化してサイト内に記載する方法(今の所)
2019年6月21日
タグ: ツール
カテゴリー: TIPS
mixhostのサーバー容量が想定以上に増えているときはバックアップファイルを疑ってみる
2018年7月30日
タグ: サーバー
カテゴリー: TIPS

Primary Sidebar

WordPress保守管理サポート

Search

最近の投稿

  • WordPressを使って構築された整体院13サイトを解説
  • WordPress保守管理サービスを開始
  • 2019-2020年末年始の営業のご案内
  • Smush Proのインストールと設定方法
  • WordCamp Tokyo 2019に参加してきました(大阪も)

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC Chrome CMS css Fireworks Google+ HTML Illustrator iOS iPhone jQuery Mac mixi Photoshop初心者 php SEO SNS Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 お知らせ アクセス解析 アプリ カスタマイズ カフェ クラウド スマホサイト スマートフォン ソーシャル ツール フラットデザイン ブログ プラグイン マーケティング ライフログ リニューアル 休業日 保守管理 制作のご依頼 最適化 集客するサイト構築 飲食店

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 転載・引用について
  • Facebook

© 2019 high five create All rights reserved.