Facebook Twitter RSS
ホーム ウェブ企画ラボ HTML・CSS FontAwesomeでアイコンが□(四角)になって表示されない場合の対策まとめ(:after:before利用時)

FontAwesomeでアイコンが□(四角)になって表示されない場合の対策まとめ(:after:before利用時)

この記事のタイトルとURLをコピーする
FontAwesomeでアイコンが□(四角)になって表示されない場合の対策まとめ(:after:before利用時)
https://webkikaku.co.jp/blog/htmlcss/fontawesome-trouble/
facebook twitter hatena Pocket

FontAwesomeが表示されない

FontAwesomeって、ご存知ですか?ウェブフォントを使ってアイコンを気軽に呼び出せちゃうという、それはそれはとてもありがたいサービスです。商用利用も可能。

例えば、矢印だけでもこれだけの種類が呼び出せます。(これでもまだ一部)

FontAwesome矢印の種類

超便利ですよね。

:afterや:beforeで利用することが多いかと思っているのですが、FontAwesomeを頑張って実装してみたものの、アイコンがどうしても表示されないいいいいいという方に向けたチェックリストを作りました。(自身がハマって備忘録にしたいだけ)

□←こんな四角が表示されてしまう問題まとめ

原因その1:ヘッダーにCSSを読み込めていない

超初歩ですね。まずはヘッダーに正しくCSSを呼び出せているか確認しましょう。

CDNのバージョンも色々ありますので、どこかのサイトに載っているCSSとHTMLをコピペしちゃってるという方は、念のため最新のものを公式サイトからコピペするのが良いのではないでしょうか。

↓最新のCSSコピペはこちらから
https://fontawesome.com/start

原因その2:PRO版のアイコンを設定してしまっている

アイコンにはPRO版で利用できるものもあります。無料で使う場合はFREE版で利用できるアイコンのみですので、表示使用としているアイコンがPRO版のものでないか一度確認してみるようにしましょう。

↓自分の利用しているフォントがFREE版として利用できるかどうかの確認はこちら(Unicodeなどで検索されるかとよろしいかと)
https://fontawesome.com/icons?d=gallery

原因その3:フォントの指定が正しくできていない

私の場合はお恥ずかしながらコレでハマっておりました。。

[code].icon::before {
font-family: "Font Awesome 5 Free"; /*←ココ!!!!!!!*/
font-weight: 900;
content: "\f007";
}[/code]

はい、これが必要最低限の正しい記述です。本当はこれにinline-blockなどを設定していく必要があるのですが、ハマりやすいのがこの3つ。

第一関門は、font-familyの指定です。

font-familyの指定は、最後に必ずFREEと付けるようにしましょう。この仕様はどうやら途中から変わったみたいなので、今まで表示されてたのに気付いたら表示されなくなってる!という方は、ここが原因となっている可能性が高いです。ちなみにPRO版の場合はPROと付けます。

ちなみに当たり前ですが、フォントを””で囲うようにしましょうね!!!!!(赤面)

原因その4:フォントウェイトの指定が出来ていない

はい、それでは再びCSSを繰り返し表示します。

[code].icon::before {
font-family: "Font Awesome 5 Free";
font-weight: 900; /*←ココ!!!!!!!*/
content: "\f007";
}[/code]

第二関門はfont-weightです。

必ずfont-weightを指定する必要があります。FREE版の場合は、400か900のみしか指定できません。(PRO版はまた変わります)

一覧表です。

Style Availability @font-face weight
Solid Free 900
Brands Free 400
Regular Pro 400
Light Pro 300

400なのか900なのかは表示したいアイコンによって指定が異なりますので注意が必要です。

Twitterアイコンですと、Brands(つまりfont-weight: 400;)のみの提供。

FontAwesome-twitter

RSSアイコンの場合は、Solid(つまりfont-weight: 900;)と、RegularとLightの3種類があります。

FontAwesome-rss

スタイルについては、赤枠部分で確認してください。(提供スタイルが1種類しか無い場合は右側の選択肢は表示されず)

原因その5:バックスラッシュを付けていない

3回目の登場ですが、再びCSSです。

[code].icon::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007"; /*←ココ!!!!!!!*/
}[/code]

contentにUnicodeを記載して呼び出したいアイコンを指定するのですが、公式サイトからUnicodeをコピペするとバックスラッシュ(\)が付いていません。なので意外と忘れがち。必ずバックスラッシュ(\)を付けるようにしましょう。

Unicodeは赤枠部分をクリックすることでコピペできます。

FontAwesome-Unicode

おわりに

以上になります。このリストに載っていないことが原因で、そして解決できたという方は、このリストに追加したいと思いますので、ぜひご共有くださいませ。

この記事のタイトルとURLをコピーする
FontAwesomeでアイコンが□(四角)になって表示されない場合の対策まとめ(:after:before利用時)
https://webkikaku.co.jp/blog/htmlcss/fontawesome-trouble/
facebook twitter hatena Pocket

東京・名古屋を中心に、中小企業に特化したホームページ制作会社。マーケットやビジネスモデルに合わせ一社一社に合わせたウェブ制作・リニューアルのご提案しています。
1000サイト以上のウェブマーケティング支援で獲得したノウハウで、リニューアル後に過去最高の成果を生み出したお取引先は多数。勘ではなくロジックに基づいたホームページ制作と柔軟な対応力で多数のお客様にご評価頂いております。

どのようなお悩みでも構いません。ホームページを有効的に活用できていないと考えているご担当者の方、まずは一度弊社にご相談くださいませ。

ご提案依頼・ご相談はこちら
公式facebook、twitterから情報を受けとる
いいね!する フォローする
前のページ
次のページ
ページトップ