疑似要素にFontAwsomeが表示されない時は!

HTML&CSS

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

Webページにちょっとしたアイコンを表示させたい場合。

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

例えばツイッターの鳥のマークなんかも、

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

こんな感じで簡単に表示できます。

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

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

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

スポンサーリンク

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

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

疑似要素を含んだボタン

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

僕は最初こんなコードを書きました。

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

右向きの矢印があるべき場所にはただの四角い枠しかありません。

ゆんつ
ゆんつ

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

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

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

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

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

Font Awesome 5 CSS Pseudo-Elements
Learn how to use Font Awesome 5 to add vector icons and social logos to your website, desktop design, or project.

説明文

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

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

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

無事にアイコンが表示されました。

ゆんつ
ゆんつ

良かった良かった

まとめ

疑似要素にFont Awsomeが表示されない場合

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

ことで表示されるようになるかもしれません。

ちなみに疑似要素ではなく普通の要素にした場合は特にfont-weightを設定しなくても表示されます。

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

ゆんつ
ゆんつ

本日は以上です

それでは、またー。

HTML&CSS
ゆんつをフォローする
スポンサーリンク
スポンサーリンク
こんぷれ

コメント

タイトルとURLをコピーしました