Font Awesome -反映不具合-

font_awesomeロゴ

今回はフォントアイコン「Font Awesome」の反映不具合に関して記載して行きたいと思います。
設定はしっかりしてあるのに反映されない、Internet Explorerなど特定のブラウザでは表示されないなど、前提として基本の設定自体は間違っていないモノとして進めていきます。

1.解決方法

パターン1

サーバー内にCSSファイルを置いて呼び出している場合は、CDNに変更。

<link href="css/font-awesome.min.css"rel="stylesheet" />

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

パターン2

CNDに変えてもダメな場合、最初からCNDでもダメな場合、データ取得先のURLを「https」から「http」に変更

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

パターン3

取得しているfont-awesomeのバージョンを変更
どこかのサイトに掲載されていたモノをそのままコピペしただけだと、古いバージョンのCSSデータであったりします。
バージョンを確認して、最新のバージョンに変更してみましょう。

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

この3パターンのどれかでだいたい解決出来ると思います。