[css]Font Awesomeを擬似要素でやるやつ

font-familyをよく忘れる。

前提
こうする

前提

無料版でやっていく。

バージョンは5。

こうする

読み込み

重いから<head>でpreloadする。多少はマシになる。

    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

通常

::before{
    content: "\f00c";
    font-family: "font awesome 5 free";
    font-weight: 600;
}

無料版の場合、font-weightは600以上（bold）で指定しないと出力されない。

Brands

::before{
    content: "\f3c0";
    font-family: "font awesome 5 brands";
}

Brandsのfont-weightは通常（normal）で。太くするとアイコンも太くなって潰れたりする。