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

显示的图标是打开的（三行）图标。我无法弄清楚我可以用另一个图标字体替换关闭状态的人吗？

这里是我的链接当前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解决方案将会有所帮助。干杯！

来源

2013-05-01 SlightlyClever

可以显示将图标字体中的数据图标属性转换为字形的JS或CSS吗？ – 2013-05-01 02:46:30

只需将其添加到原始帖子。 – SlightlyClever 2013-05-01 02:52:12

看起来你需要更新显示的图标是改变锚元素的data-icon属性。这里有一种方法可以做到这一点：

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

来源

2013-05-01 02:55:10

但是，这不仅会默认更改显示的图标吗？有没有办法在链接处于活动状态时仅更改图标？ – SlightlyClever 2013-05-01 03:08:25

仅当鼠标在锚上按下时才更改图标就足够了吗？这样，您可以在按下鼠标时更改图标，然后在释放鼠标时将其改回。另一个想法是将选择器更新为'.menu-link：active'。 – 2013-05-01 03:13:50

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

回答

相关问题