Lightning のハンバーガーボタンに Font Awesome のアイコンを設定するカスタマイズ手順

以下の CSS を追加します。

.vk-mobile-nav-menu-btn,
.vk-mobile-nav-menu-btn.menu-open {
    background-image: none;
    text-indent: 0;
    font-size: 10px;
}

この結果、背景画像（3本線）が消えて、MENU の文字が現れます。

MENU の文字は text-indent で見えない設定になっていたのを本来の位置に表示していて、文字を追加したのではないです。

.menu-open がついているのはモバイルナビが表示されたときのボタンの指定です。

以下の CSS を追加します。

f1b0 の部分を使いたいアイコンの4桁のコードに書き換えます。

f00d は閉じる（×）のアイコンです。

.vk-mobile-nav-menu-btn::before {
    font-family: "Font Awesome 7 Free";
    font-weight: bold;
    content: '\f1b0';
}
.vk-mobile-nav-menu-btn.menu-open::before {
    content: '\f00d';
}

この結果、まだ小さいですがアイコンが表示されます。

以下の CSS を追加します。

px の数値指定はヘッダーの高さ・お好みに合わせて調整します。

.vk-mobile-nav-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.vk-mobile-nav-menu-btn {
    width: 46px;
    height: 54px;
    padding-top: 3px;
}
.vk-mobile-nav-menu-btn::before {
    font-size: 34px;
    line-height: 1;
}

この結果、ボタンとアイコンが大きくなって図のように配置されます。

以下の CSS を追加します。

#04d94f の部分はサイト・お好みに合わせて指定します。

.vk-mobile-nav-menu-btn,
.vk-mobile-nav-menu-btn.menu-open {
    color: #04d94f;
    border-color: currentColor;
}

この結果、ボタンとボーダーに色がついて完成です。