将 CSS 中的图标字体更改为活动状态

Question

我目前有一个响应式切换导航菜单，效果很好。我遇到的问题是导航图标。我正在尝试将图标字体用于打开和关闭状态。目前我的 HTML 是：

<a href="#menu" class="menu-link" aria-hidden="true" data-icon="&#xe008;"></a>
                <nav id="menu" role="navigation">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="index.html#work">work</a></li>
                        <li><a href="index.html#profile">profile</a></li>
                        <li><a href="index.html#life">life</a></li>
                    </ul>
                </nav>

显示的图标是打开的（三行）图标。我无法确定谁可以使用另一种图标字体将其替换为关闭状态？

这是我当前的链接 CSS：

a.menu-link { float: right; display: block; font-size: 1.75em; margin-right: .75em; margin-top: 1em; }

&.active {?}


@font-face {
font-weight: normal;
font-style: normal;
font-family: 'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.woff') format('woff'),
    url('../fonts/icomoon.ttf') format('truetype'),
    url('../fonts/icomoon.svg#icomoon') format('svg');

}

[data-icon]:before {
content: attr(data-icon);
text-transform: none;
font-weight: normal;
font-variant: normal;
font-family: 'icomoon';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;

}

我认为我应该使用 if 语句？但是有没有通过标记或 CSS 的解决方案？如果没有，那么 JS 解决方案会很有帮助。伙计们干杯！

Answer 1

看来更新显示的图标只需要更改锚元素的data-icon 属性即可。这是一种方法：

document.querySelector('.menu-link').setAttribute('data-icon', 'GLYPH_CODE_HERE');