皆さんは普段、アイコンフォントを使うことはありますか?
筆者は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でのアレコレでした〜!