こんにちは、ゆんつです。
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」で付与します。
僕は、以下のようなコードを書きました。
See the Pen
FontAwesome1 by konpure (@yuntu)
on CodePen.
右向きの矢印があるべき場所には何も表示されません。
なんで表示されないんだろう？
「タイプミスは無いか」とか「Font Awesomeが、ちゃんと読み込まれて無いんじゃないか」とかいろいろチェックしてみましたが、それらは全てOKでした。
どうして表示されないのか・・・
font-weightを設定していなかった
Font Awesomeの「CSS Pseudo-elements」というページに解決法が載っています。
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.
無事に、Font Awsomeのフォントアイコンが表示されました。
良かった良かった
まとめ
疑似要素にFont Awsomeのアイコンフォントが表示されない場合
ことで、表示されるようになります。
ちなみに、疑似要素ではなく普通のHTMLのコードを使用する場合は、特にfont-weightを設定しなくても表示されます。
See the Pen
FontAwesome3 by konpure (@yuntu)
on CodePen.
本日は以上です
それでは、またー。
コメント