Font Awsomeのアイコンが疑似要素で表示されない時は!

HTML&CSS

こんにちは、ゆんつです。

Webサイトに、ちょっとしたアイコンを表示させたい場合。

「Font Awesome」のアイコンフォントを使うと、手軽で綺麗にアイコンを表示させることが出来ます。

例えばツイッターの鳥のマークなんかも、Font Awesomeを使うことで以下のように簡単に表示できます。

See the Pen
FontAwesome3_1
by konpure (@yuntu)
on CodePen.

Font Awesomeはアイコンフォント(文字のように表現できるアイコン)なので、拡大しても画像のように汚くならないですし、CSSで色などを簡単に変更できるので大変便利です。

でも、そんな便利なFont Awesomeがこの前が思ったように表示されなくて、その解決までに手間取ってしまったので備忘録として書き残しおきます。

使用したFont Awesomeのバージョンは5の無料版です。

疑似要素でFont Awesomeが表示されない!

僕はこんな感じのボタンを作ろうとしていました。

疑似要素を含んだボタン

このボタンの中の右向きの矢印アイコンを「Font Awesome 5」で付与します。

矢印部分を疑似要素でFont Awesomeで作成する

僕は、以下のようなコードを書きました。

See the Pen
FontAwesome1
by konpure (@yuntu)
on CodePen.

右向きの矢印があるべき場所には何も表示されません。

ゆんつ
ゆんつ

なんで表示されないんだろう?

「タイプミスは無いか」とか「Font Awesomeが、ちゃんと読み込まれて無いんじゃないか」とかいろいろチェックしてみましたが、それらは全てOKでした。

どうして表示されないのか・・・

font-weightを設定していなかった

Font Awesomeの「CSS Pseudo-elements」というページに解決法が載っています。

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

解決法

Set the font-weight: 900 (Solid), 400 (Regular or Brands), 300 (Light)

つまり疑似要素にFont Awesomeを使用する場合、使用するアイコンフォントの種別に応じてfont-weightをSolidなら900、RegularかBrandsなら400、Lightなら300にしないと疑似要素では表示されないのです。

アイコンフォントの種別は、該当するアイコンのページで確認することが出来ます。

選択したアイコンフォントの画面に種別が記載されている

僕が使いたいFont Awesomeのアイコンフォントの種別は

使いたいアイコンフォントの種別はsolidだった

ゆんつ
ゆんつ

solid

ですのでCSSで疑似要素にfont-weightを900を追加すると

See the Pen
FontAwesome2
by konpure (@yuntu)
on CodePen.

無事に、Font Awsomeのフォントアイコンが表示されました。

ゆんつ
ゆんつ

良かった良かった

まとめ

疑似要素にFont Awsomeのアイコンフォントが表示されない場合

アイコンフォントの種別に応じてfont-weightを適切に設定する!

ことで、表示されるようになります。

ちなみに、疑似要素ではなく普通のHTMLのコードを使用する場合は、特にfont-weightを設定しなくても表示されます。

See the Pen
FontAwesome3
by konpure (@yuntu)
on CodePen.

ゆんつ
ゆんつ

本日は以上です

それでは、またー。

コメント