導航頁面時導航欄上的 Bootstrap 下拉圖標出現故障

Question

我有這個導航欄下拉代碼：

<li class="nav-item dropdown">
    <a href="javascript:void(0)" id="btn_login" class="nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="en">Log In <i class="fas fa-chevron-down"></i></span>
        <span class="my">Log Masuk <i class="fas fa-chevron-down"></i></span>
    </a>
    <ul id="login_dropdown" class="dropdown-menu dropdown-primary dropdown-menu-right mt-2 shadow-lg animated bounceIn" aria-labelledby="btn_login">
        <li class="px-3 pt-3" style="width: 200px;">
            <!-- Form here -->
        </li>
    </ul>
</li>

我用這個 jquery 來改變下拉圖標：

$(".dropdown").on("show.bs.dropdown", function() {
    $(this).find(".fas").removeClass("fa-chevron-down").addClass("fa-chevron-up");
}).on("hide.bs.dropdown", function() {
    $(this).find(".fas").removeClass("fa-chevron-up").addClass("fa-chevron-down");
});

看看我制作的這個屏幕截圖（忽略開關，我稍后會修復它，現在專注於人字形圖標）： Glitching Navbar

如您所見，頁面加載時似乎沒有圖標，這使得導航鏈接向右移動了一點，但是當圖標出現時，導航鏈接會移動到正確的位置。

旁注：

• 似乎每個頁面上都加載了圖標。
• 我目前只使用HTML 。 因此，我在每個頁面上粘貼相同的導航欄，但具有不同的鏈接活動狀態。
• 我不考慮任何 iframe 或在所有頁面上包含相同的導航欄實例（但）。
• 這種情況每次都發生在基於 CHROMIUM 的瀏覽器中。
• 只有FIREFOX似乎罰款雖然它似乎在第一次加載，但隨后沒有問題。

Answer 1

為圖標添加固定寬度應該使導航欄停止跳躍

.fas {
    width: 20px
}