css - 如何更改打开的 Bootstrap 移动切换的颜色

Question

打开栏菜单时(在移动 View 上)，我需要更改图标颜色。我正在使用 Foundry theme .

这是菜单看起来关闭的样子:

当我打开菜单时，图标消失了，因为是白色的:

我也试过this建议，但它对我不起作用。

这是font awesome menu icon的代码:

<nav>
...
    <div class="module widget-handle mobile-toggle right visible-sm visible-xs absolute-xs">
        <i class="icon fa fa-bars"></i>
    </div>
</nav>

Answer 1

首先我会在 i 标签上添加一个 id :

<i class="icon fa fa-bars" id="burger"></i>

然后我会在我的 .js 文件中使用一个函数来改变我的汉堡的颜色，当用户点击它:

const burger = document.getElementById('burger');
burger.addEventListener('click', () => {
    burger.style.color = 'green';
});