Font Awesomeがうまく表示されない。

どうも、こんにちは。

ピクトグラムフォントのFont Awesomeを擬似要素内で使うときにハマったので解決方法を掲載します。

結論は一番下にあるので、ソッコー解決したい人は一番下まですっ飛ばしてください。

Font Awesomeでcontent指定してるのに、□になる・・・

そうです。

この四角!何でよ!
何しても直らない!

Font AwesomeをCSS内でcontent指定して使う手順

絶対にいろんなところでつまづいている人いると思う。

CSS内で指定するときは まず、headerでCDN読み込み

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

そんで、CSS内擬似要素(:after、:before)で指定

.fontawe:after{
    display:block;
    content:"\f061";
    font-family: "Font Awesome";
    width:20px;
    height:20px;
    
}

これだと□になります。

間違い要素をまとめていくと

擬似要素の使い方は自分で調べてもらうとして、
擬似要素内でどうしてFont Awesomeが□になってしまうのか、をまとめました。

(間違い要素1) font-familyは「Font Awesome 5 Free」

正しいフォント指定は

font-family: "Font Awesome 5 Free";

2018年8月現在で、Font Awesome のバージョン5フリー版を使う場合です。
古いブログだと「5 Free」がない記載があります。

(間違い要素2)contentは「\(バックスラッシュ)」付きのUnicode

正しいアイコン指定は

content:"\f061";

バックスラッシュがなかったり、半角¥マークになってたりしたら間違い。

よくありがちなのは、Font-awesomeのアイコン画面の一番左のコードを直接書くこと。

content:”<i class=”fas~~~~~~~”> は違いますよ。
contentで指定するときは、ユニコードをコピーしてください。

バックスラッシュもお忘れなく。

font-weightの指定がないと表示されない

ワタクシ、これによって1時間も悩まされました。

font-weight:900;

いろんなページをまさぐりまくっていたら確かに書いてありましたよ。こんな表がこのページに。

こんなページ誰も見ないでしょ!使い方のページに書いといてくれ〜と叫んだ。

Free版を表示するときは、font-weightを「900」か「bold」で指定しないといけないようです。

確かにfont-weightを指定したら、表示されました。

ここまでの道のり長かったなぁ〜・・・・。

コピペ用

.fontawe:after{
    display:block;
    content:"\f061";
    width:20px;
    height:20px;
    font-family: "Font Awesome 5 Free";
    font-weight:900;
}

これをぶち込んだら、とりあえずいけるはずです。

コメントを残す