Font Awesomeのアイコンを疑似要素(:beforeや:after)のcontentで表示しようと思っても、上手く表示されず「□(四角形の記号)」になってしまうことがある。
原因はfont-weightの設定をしていないから。
Basic Use – Font Awesome
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
※Since Font Awesome was first implemented and continues to support being rendered using the CSS @font-face method, each of its styles corresponds to a particular font weight
上記の通り、各アイコンごとに特定のfont-weightに対応しているので、そのfont-weightを設定していないと正しく表示されないとのこと。
具体的な設定方法は以下の通り。
- アイコンのページにて「Style」を確認する
- 「Style」に対応したfont-weightの値を設定する
左上と右側に「Solid( Style)」の表記あり。
font-weightの設定のバリエーションが1つしかないときは右側は表示されない。
Free Planの場合は、
・Solid(font-weight: 900;)
・Brands(font-weight: 400;)
の2種類しかない。
目次
ソースコード
HTML
font-weight: の設定なしだと表示されない例 => caret-up []
font-weight: の設定なし =>
font-weight: の設定あり =>
※caret-upは「Solid Style」なのでfont-wight: 900; が必要
CSS
p {
line-height: 30px;
}
.icon:after {
content: '\f0d8'; /* caret-up */
display: inline-block;
width: 30px;
height: 30px;
color: black;
font-size: 30px;
font-family: "Font Awesome 5 Free"; /* font-familyの指定も忘れずに */
}
.not-shown:after {
/* font-weightの設定なし */
}
.shown:after {
/* font-weightの設定をするとcontentで指定したアイコンが表示される */
font-weight: 900;
}