Font Awesomeでアイコンを使用する場合の注意点

mayatasomayataso

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の場合、これで表示される
   }
}

公式にこの辺の説明が全然ないのは罠すぎると思う。