CSS (글꼴 굉장) - 자바없이 다른 버튼 상태에서 아이콘 색상 변경

Question

제목에 따라 button 상태의 아이콘 색상을 Font Awesome 변경하는 방법을 알고 싶습니다.

예를 들어 다음과 같이 사용자 지정 search 및 clear 단추가 있습니다. Bootstrap도 사용 중이며 클래스 이름은 btn은 부트 스트랩에서 왔습니다. 내가 :before 사이비 클래스

.search:before { 
    font-family: 'FontAwesome'; 
    content: "\f002"; 
    margin-right: 5px; 
    color: darkorange; 
} 

으로 search 버튼의 아이콘을 내장했고

<button class="btn search">Search</button> 
<button class="btn clear">Clear</button> 

은 내가 버튼을 :focus에있을 때 darkorangewhite로 변경 할 수 있어야합니다.

CSS로 할 수있는 방법이 있습니까?

이것은 JS Fiddle입니다.

Answer 1

나는 :focus이 아닌 :active을 찾고 있다고 생각합니다.

.search:active:before, .clear:active:before { 
    color: white; 
} 

다음을보십시오 : fiddle.