皆さんは普段、アイコンフォントを使うことはありますか?
筆者はFontAwesomeというアイコンフォントを使っているのですが、なぜか表題の『iPhoneの時だけトウフ表示』という謎現象にぶつかりましたw

で『なんでやねん』ということで色々調べましたが、根本的な原因は結局わからず、
webpackからのコンパイルをやめて『CDNから外部ファイルr読み込み』することで解決しました。
※同じような現象に当たった人、ぜひ教えてください(泣)

まぁいまだに4.7を使ってるのも問題なのかもしれませんが(5以降は細かすぎてちょっと気が引ける。。。)
バージョンも2021年2月現在、6まで上がっているということで、いろんな方が記事にしてくれています。
この記事では『4.7でもこれはあるかも』という内容をピックアップしてまとめましたので、FontAwesomeの4.7をお使いの方で、うまくいかない方はご一読ください!

FontAwesomeが読み込めていない

公式では『cssファイルをダウンロードして、読み込んでね』となっていますが、これが読み込めてない場合、まぁ出ません(そりゃそうなんですが)。

筆者はこれがうまくwebpackでコンパイルできず、つまづいていましたが、まずはここを見直しましょう。
外部パスで読み込まれていない場合、Google Chromeなどの検証ツールで確認しましょう。404などのコンソールエラーを吐いているはずです。

ダウンロードしてうまくいかない場合は手っ取り早くCDNから読み込むのが楽です。
FontAwesomeのCDNは以下を参照ください。

iタグを使った埋め込みであれば、おそらくこれだけで解決するもと思われますので、まずここから検証しましょー
公式はこちらからどうぞ!


※公式で紹介されている埋め込み方法は上記のようなhtmlタグです。これのclass名を変えて、お好きなアイコンを埋めるという形で利用します。

font-familyやcontentの指定が違う

次にcss読み込みの場合ですが、cssを使って読み込む場合、beforeかafterの擬似要素を使いますが、その際の書き方はお決まりパターンです。

p {
    content: "\f058";
    font-family: "FontAwesome";
}

さて、上記指定で記入されていますか?このfont-familyやcontent属性が違うと表示されませんのでご注意ください!
content属性は頭にバックスラッシュ( \ )です!ここも間違えがちなので気をつけましょ〜

FontAwesome5.9以降はどんな風に使うの?

基本は『kit管理 + PVで有料無料が切り替わる』という風に使う

さて、おまけですが新しいFontAwesomeではどうかというと、5.9以降はkitで管理ということでした。
ようするにアカウントを登録して埋め込みコードを発行、それをサイトに貼り付けることで、常に最新バージョンが使えるし、いちいちダウンロードしなくていいというメリットがあります。
また、この利用方法の場合は、月間1万PVまで無料という風になりますのでここも要注意ですね!

 

ダウンロードして利用することもできる

2021年2月時点ですとダウンロードして利用することもできるようですので、筆者的にはこちらがおすすめ。
読み込み速度も従来と変わらないということと、あまり最新バージョンに用事がない人、また、PV制限が嫌な人はダウンロードして利用するのがいいと思います。特に最新にするという必要もないと思いますしね。

以上、FontAwesome4.7でのアレコレでした〜!