Изменение шрифта иконки в CSS для активного состояния

Question

В настоящее время у меня есть адаптивное меню навигации, которое прекрасно работает. У меня проблема со значком навигации. Я пытаюсь использовать Icon Fonts как для открытого, так и для закрытого состояния. В настоящее время мой 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');