Изменение шрифта значка в 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; 

}

Я полагаю, я должен использовать, если заявление? но есть ли решение через разметку или CSS? Если нет, то было бы полезно использовать JS-решение. Привет, ребята!

Answer 1

Кажется, что все, что вам нужно для обновления отображаемого значка, - это изменить атрибут привязки data-icon. Вот один из способов сделать это:

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