iPone・SafariでもFont Awesomeを表示する方法

先日ふとiPhone(Safari)で自分のサイトの表示を見てみたら、Font Awesomeのアイコンが全て「 □ 」になっていてかなり焦りました。

原因は広告表示を制限するアプリで、Ad-Blocker Pro、Adblock Plus、AdFilter、AdGuardのPrivacy、が影響していました(どれかひとつでも解除するとSafariでもアイコンが表示されました)。

でもこの記事で書くのは「アドブロッカーを外す」という方法ではありません!

結論からずばっと言うと、<head></head>で読み込んでいるFont AwesomeのURLを下記のようにcdnjs.comで配布されているものに変更したら、アドブロッカーを外さなくてもアイコンが表示されるようになりました!

<!-- 以前までの読み込みURL -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
<!-- 今の読み込みURL -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>

このリンクは cdnjs.com で font-awesome と試しに検索したら出てきました。

画像引用元: https://cdnjs.com/libraries/font-awesome

(ご参考までに、検索結果のページは「https://cdnjs.com/libraries/font-awesome」から飛べます Font Awesomeが更新されると変わるかもしれません)

私は一番上に出てきたリンクを使っています。

なので、all.min.cssを指定してはいますが、URLの末尾を all.css に変更しても表示されました。

また、正確にはリンクコピー時に自動で「integrity」や「crossorigin」が入っているので、

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

という長いコードで読み込んでいます(integrityやcrossoriginがなくても表示されます)。

integrityとは
配布しているファイルと読み込んでいるファイルが同じものかどうかを見分けるための暗号化された文字列だそう。万が一ハッキングで配布ファイルが改ざんされても、このintegrityがマッチしないので、integrityを入れておくと改ざんされたファイルが読み込まれることを防ぐことができるようです。

cdnjs.comが配信している他のJavaScriptなどのライブラリも使ってるからまあ安心かな、という軽い気持ちで、あまり期待なく試してみたので、Safariでもアイコンが表示された瞬間は飛び上がりそうでした!笑 何でこれなら表示されるのかという理由は・・・全然分かりません。

別の方法としては、CSSファイル冒頭で @import でfontawesomeを読み込んだら表示された!との情報もありましたが、私は @import のやり方が分からず(←)、エラーになったので断念(勉強します・・・)。

サイトに遊びきてくれる方に毎度「広告ブロッカーを外してください〜」なんてお願いしたく無いし、何か方法はないかな〜と思っていたので、本当に良かったです。

またいつアイコンが表示されない問題が起きるかは分かりませんが、当面これで大丈夫そうです。後日Font Awesomeがアップデートされてもまだ問題があれば、また cdnjs.com でファイルを探してみようと思います。

\ Share /

Leave a Comment