Font Awesomeでアイコンを使用する場合の注意点
Font Awesome 5 はUnicodeも用意されており、例えば以下のようにして使うこともできる。
icon {
font-size: 0;
&:before {
ont-size: 1rem;
content: "\f553"; // ←こいつ
font-family: "Font Awesome 5 Free";
}
}
ただし、これだけだと表示されないものもある。
どういうことかというと、Awesome Fontは フォントの種類にLegularやSolidがあり、それをfont-weight で指定する必要がある。(400がLegular、900がSolid)
font-weightはデフォルトで400なので通常はLegularが指定されるが、Awesome Fontはレギュラーが有料なことがあり、その場合アイコンは表示されない。
icon {
font-size: 0;
&:before {
ont-size: 1rem;
content: "\f553"; // ←こいつがUnicode
font-family: "Font Awesome 5 Free";
font-weight: 900; // ←SolidフォントがFreeの場合、これで表示される
}
}
公式にこの辺の説明が全然ないのは罠すぎると思う。