在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中更改活動狀態的圖標字體

回答

相關問題