jquery - 浏览页面时导航栏故障上的Bootstrap下拉图标

我有这个导航栏下拉代码：

<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看起来不错，但随后没有问题。

查看更多