Font Awesomeがうまく表示されない。
2018.08.04
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が□になってしまうのか、をまとめました。
（間違い要素１） font-familyは「Font Awesome 5 Free」
正しいフォント指定は
font-family: "Font Awesome 5 Free";
2018年8月現在で、Font Awesome のバージョン５フリー版を使う場合です。
古いブログだと「5 Free」がない記載があります。
（間違い要素２）contentは「\（バックスラッシュ）」付きのUnicode
正しいアイコン指定は
content:"\f061";
バックスラッシュがなかったり、半角￥マークになってたりしたら間違い。
よくありがちなのは、Font-awesomeのアイコン画面の一番左のコードを直接書くこと。
content:”<i class=”fas~~~~~~~”> は違いますよ。
contentで指定するときは、ユニコードをコピーしてください。
バックスラッシュもお忘れなく。
font-weightの指定がないと表示されない
ワタクシ、これによって１時間も悩まされました。
font-weight:900;
いろんなページをまさぐりまくっていたら確かに書いてありましたよ。こんな表がこのページに。
こんなページ誰も見ないでしょ！使い方のページに書いといてくれ〜と叫んだ。
Free版を表示するときは、font-weightを「９００」か「bold」で指定しないといけないようです。
確かにfont-weightを指定したら、表示されました。
ここまでの道のり長かったなぁ〜・・・・。
コピペ用
.fontawe:after{
display:block;
content:"\f061";
width:20px;
height:20px;
font-family: "Font Awesome 5 Free";
font-weight:900;
}
これをぶち込んだら、とりあえずいけるはずです。
[wpap service=”with” type=”detail” id=”4839960224″ title=”6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポ…”]]]>