如何改變字體真棒圖標的顏色，當它是活動的

Question

如何改變字體真棒圖標的顏色，當它是活躍的，我有一個菜單與字體真棒鏈接，我想改變圖標的​​顏色時，是積極的，一些可以幫助這個？

我讀了關於狀態：https://smacss.com/book/state但仍然不工作在我的代碼，它的一種方式來使這項工作？謝謝。

的jsfiddle：https://jsfiddle.net/oosa8yzk/

我的HTML

<ul> 
     <li> 
     <a class="menu" data-toggle="tooltip" data-placement="bottom" title="home"> 
      <i class="fa fa-bars fa-2x" aria-hidden="true"></i> 
     </a> 
     </li> 
     <li> 
     <a class="search"><i class="fa fa-search fa-2x" aria-hidden="true"></i></a> 
     </li> 
    </ul> 

我頂嘴：

ul { 
    list-style-type: none; 
    li { 
    padding: 10px; 
    border-top: 1px solid blue; 
    &:first-child { 
     border: none; 
    } 
    i { 
     color: black; 
     &:hover { 
     color: white; 
     background-color: blue; 
     } 
    } 
    &:hover { 
     background-color: blue; 
     color: white; 
    } 
     &:active { 
     background-color: yellow; 
     color: black; 
    } 
     &:focus { 
     background-color: red; 
     color: white; 
    } 
    } 
} 

我的CSS：

ul { 
    list-style-type: none; 
} 
ul li { 
    padding: 10px; 
    border-top: 1px solid blue; 
} 
ul li:first-child { 
    border: none; 
} 
ul li i { 
    color: black; 
} 
ul li i:hover { 
    color: white; 
    background-color: blue; 
} 
ul li:hover { 
    background-color: blue; 
    color: white; 
} 
ul li:active { 
    background-color: yellow; 
    color: black; 
} 
ul li:focus { 
    background-color: red; 
    color: white; 
} 

Answer 1

你SCSS

li { 
    // active pseudo on li 
    &:active { 
    i { color: #your-active-color; } 
    } 

    a { 
    // active pseudo on a link 
    &.active { 
     i { color: #your-active-color; } 
    } 
    } 

} 

的jQuery -

$(document).ready(function() { 
    $('li a').on('click', function() { 
    $('li a').removeClass('active'); 
    $(this).addClass('active'); 
    }); 
}); 

Answer 2

您可以使用下面的代碼

.fa:active{ 
color: #your-active-color; 
} 

Answer 3

您可以在HTML中添加自定義類這樣的：

<ul> 
    <li> 
    <a class="menu" data-toggle="tooltip" data-placement="bottom" title="home"> 
     <i class="fa fa-bars fa-2x color" aria-hidden="true"></i> 
    </a> 
    </li> 
    <li> 
    <a class="search"><i class="fa fa-search fa-2x color" aria-hidden="true"></i></a> 
    </li> 
</ul> 

，然後在你的CSS在活動事件添加屬性：

.color:active { 
    color:red; 
}