fontawesomeアイコンがiPhoneで表示されないときの対処法を記します。

css

fontawesomeは、CSSとLESSで作られたフォントとアイコンのツールキットです。
シェア率も高く非常に人気が高いのが特徴です。

そんな、fontawesomeのアイコンが
iPhoneで表示されないという不具合が起きまして
その解決方法を記していきます。

iPhoneでfontawesomeを表示させる方法

PCや開発者ツールでは、fontawesomeのアイコンは
表示されますが、なぜかiPhoneでは表示されないという不具合が起こりました。

HTMLのHEAD内にfontawesomeを読み込むことが原因でした。
CSSで@importを使用してfontawesomeを読み込むと正常に表示されます。

つまり、

iPhoneでアイコンが表示されない例
<head>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" >
</head>

から下記の読み込み方に変えるとiPhoneでも表示されるようになりました。

iPhoneでアイコンが表示される
@import url(//use.fontawesome.com/releases/v5.7.2/css/all.css);

.fontawesome:before{
font-family: "Font Awesome 5 Free";
content: '\f007';
font-weight: 900;
}

私と同じく、アイコンが表示されず読み込み方を変えたら
表示されるようになったという情報がありました。

なぜ、外部読み込みの方法を変えるだけで表示されるのかは正直不明です。
原因が分かった方はご教授お願い致します。

クチコミで稼ぐなら「パラキャリ」

隙間時間を有効活用するなら
クチコミで稼ぐ「パラキャリ」がお勧めです。

高単価のクチコミが多い「パラキャリ」では、
副業月収10万円以上を達成した方100名突破している実績があります。

アフィリエイトをするためのメディア、サイトの登録も不要。必要事項を登録すれば、2分で簡単に登録できます。

ぜひ興味がある方は「パラキャリ」の詳細を見てみてください!
口コミで副業できる『パラキャリ』

最後まで読んでいただき、ありがとうございました。

コメント

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