どんな感じか使ってみたかったので、ダウンロード版ではなく、Web版使ってみることにしました。Awesome:Web版の使用コードいざタグ内に上記で取得したコードを挿入しました。チェックや矢印は無事に表示されたのですが、なぜか今まで表示されていたデフォルトのアイコンが表示されなくなってしまいました。原因は思わぬところでした。Chromeのデベロッパーツールで対象のアイコンを検証していると、なんと原因は。Awesomeを使っていたようで、二重でCSSを読み込ませていたこと。Awesomeが定義されていました。バージョン違いのCSSはイケるはず、例え同一のCSSを読み込んでも表示されないことはないはずです。?↓がChromeデベロッパーツールの画面です。Free」)が指定されています。Free」!?試しにデベロッパーツール上で、対象フォントをちょいと無効にしてみると。Free無効)なんと表示されるではありませんか。勘のいい方はお気づきかもしれません。用のものだったのです。Font-Awesomeとは、画像のようなアイコンを文字とフォントで表現する仕組みです。Free」というフォントは、Ver5の必要なアイコンが設定されているフォントの根幹のようなものなのです。他のバージョンでは参照してはいけません。Ver5系ではなく、Ver4系で使いたい場合は、↓のようにフォントの指定を変える必要があります。"FontAwesome";上記でVer4系のアイコン対応のフォントになりました。四角(□)に表示されていたアイコンが正常に表示されるはずです。古いバージョンはいずれ淘汰される運命にありますので、可能なら新しいほうに合わせほうが無難かと思います。Awesomeを読み込んでいないか(ページのソースを表示で確認)↑の場合、バージョン違いのCSSを読み込んでいないか指定したアイコンが本家HP上で確認できるか。上記に注意しながらデベロッパーツールを活用してチェックしてみてください。Awesomeを使用してアイコンが表示されない場合の対策方法でした。コメントをキャンセルメールアドレスが公開されることはありません。