Font Awesomeがうまく表示されない。
YOUR GOOD CREATOR
AND SOULMATE
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
.fontawe:after{ display:block; content:"\f061"; font-family: "Font Awesome"; width:20px; height:20px; }これだと□になります。
font-family: "Font Awesome 5 Free";2018年8月現在で、Font Awesome のバージョン5フリー版を使う場合です。 古いブログだと「5 Free」がない記載があります。
content:"\f061";バックスラッシュがなかったり、半角¥マークになってたりしたら間違い。 よくありがちなのは、Font-awesomeのアイコン画面の一番左のコードを直接書くこと。 content:”<i class=”fas~~~~~~~”> は違いますよ。 contentで指定するときは、ユニコードをコピーしてください。 バックスラッシュもお忘れなく。
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; }これをぶち込んだら、とりあえずいけるはずです。 [wpap service=”with” type=”detail” id=”4839960224″ title=”6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポ…”]]]>