環境
FontAwesome: 5.0.4
FontAwesome5を疑似要素で利用しようとしたところ一部フォントが"□"と表示され、正しく表示されませんでした。
この問題の対策はスタイルシートにて「font-weight」の指定をすることでした。
注意点としては「font-weight」を指定したとしても対応する太さが無い場合は"□"と表示されてしまうので、 「font-weigh」を指定しても表示されない場合は以下の値を試してみると表示される可能性があります。
font-weightに指定できる値
| 数値指定 | 文字指定 |
|---|---|
| 100 | |
| 200 | |
| 300 | |
| 400 | normal |
| 500 | |
| 600 | |
| 700 | bold |
| 800 | |
| 900 |
|
1 2 3 4 5 6 7 |
<style> a:after{ font-family: 'Font Awesome 5 Free'; content: "\f054"; font-weight: bold; } </style> |