Wie man font-awesome Symbolfarbe ändert, wenn es aktiv ist

Question

Wie font-awesome Symbolfarbe ändern, wenn es aktiv ist, habe ich ein Menü mit font-awesome Links und ich möchte die Symbole Farben ändern, wenn aktiv ist, einige kann dabei helfen?

Ich habe über Staaten gelesen: https://smacss.com/book/state aber immer noch nicht funktioniert in meinem Code, es ist eine Möglichkeit, dies zu arbeiten? Danke.

jsfiddle: https://jsfiddle.net/oosa8yzk/

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

mein sass:

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

mein 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

Ihre 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

können Sie den folgenden Code verwenden

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

Answer 3

Sie können eine benutzerdefinierte Klasse in Ihrem html wie folgt hinzu:

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

Und dann fügen Sie in Ihrem CSS eine Eigenschaft im aktiven Ereignisse:

.color:active { 
    color:red; 
}