활성 상태에서 CSS의 아이콘 글꼴을 변경하십시오.

현재 응답 가능한 토글 탐색 메뉴가 있습니다. 정상적으로 작동합니다. 내가 가진 문제는 탐색 아이콘입니다. 아이콘 글꼴을 열기 및 닫기 상태 모두에 사용하려고합니다. 현재 내 HTML은 다음과 같습니다.활성 상태에서 CSS의 아이콘 글꼴을 변경하십시오.

<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>

표시 아이콘은 열린 (세 줄) 아이콘입니다. 다른 아이콘 글꼴을 사용하여 닫기 상태로 바꿀 수있는 사람을 알아내는 데 문제가 있습니까? 내가가 if 문을 사용하기로되어있어 가정

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는? 마크 업이나 CSS를 통한 해결책이 있습니까? 그렇지 않다면 JS 솔루션이 도움이 될 것입니다. 건배!

출처

2013-05-01 SlightlyClever

데이터 아이콘 속성을 아이콘 글꼴의 글리프로 변환하는 JS 또는 CSS를 표시 할 수 있습니까? –

그냥 원래 게시물에 추가했습니다. – SlightlyClever

표시된 아이콘을 업데이트해야 할 필요가있는 것은 앵커 요소의 data-icon 특성을 변경하는 것입니다. 여기에 한 가지 방법이 있습니다 :

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

출처

2013-05-01 02:55:10

하지만 기본적으로 표시된 아이콘이 변경되지는 않습니까? 링크가 활성 상태 일 때에 만 아이콘을 변경하는 방법이 있습니까? – SlightlyClever

마우스를 앵커에서 눌렀을 때 아이콘 만 변경하면 충분합니까? 이렇게하면 마우스를 눌렀을 때 아이콘을 변경 한 다음 마우스를 놓을 때 아이콘을 다시 변경할 수 있습니다. 또 다른 아이디어는 selector를'.menu-link : active'로 업데이트하는 것입니다. –

활성 상태에서 CSS의 아이콘 글꼴을 변경하십시오.

답변

관련 문제