[CSS]fontawsomeが◽︎でうまく表示されない時の確認事項
fontawsomeはとても便利ですが、時々うまく表示されない時があります。四角のように表示されてうまく表示できない。そんな時の確認事項を紹介します。
ヘッダーにCSSを読み込む
公式サイトの最新情報を反映するようにしましょう。ネット上から拾ってきたコピペコードだとエラーを吐き出す場合があります。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
↑このコードも時間の経過と共に古くなります。
最新は公式サイトで確認。
free版のアイコンを使っていない
自分はこのパターンではまりました。問題なくCSSを書いているはずなのに、表示されない。
よくよく見てみると、free版ではないPRO版のアイコンを指定していました。
こちらも公式サイトでチェックしましょう。
https://fontawesome.com/icons?d=gallery&m=free
CSSの記述を間違っている
.sidebar-heading:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f105";
margin-right: 7px;
}
font-familyとfont-weightの記述を注意してください。ちなみにFree版のfont-weightは400か900しか指定できないので、こちらもあわせて注意しましょう。
またアイコンによっては400の指定しか受け付けないものもありますので、注意しましょう。
