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

如您所见，页面加载时图标似乎不存在，使导航 links 向右移动一点点，但是当图标出现时，导航 link 移动到正确的位置。

旁注：

似乎每个页面都加载了图标。
我目前只使用 HTML。因此，我在每个页面上粘贴了相同的导航栏，但具有不同的 link 活动状态。
我还没有考虑任何 iframe 或在所有页面上包含相同的导航栏实例。
这种情况在 基于 CHROMIUM 的浏览器 中每次都会发生。
只有 FIREFOX 看起来不错，虽然它似乎确实加载 一开始 ，但后来没有问题。

Answer 1

为图标添加固定宽度应该会使导航栏停止跳跃

.fas {
    width: 20px
}

Bootstrap 导航页面时导航栏上的下拉图标出现故障

Bootstrap dropdown icon on navbar glitch while navigating pages

html

css

jquery

navbar

mdbootstrap