CSS (Font Awesome) - changing icon color on different button state without Javascript

3
votes

As per the title, I want to know how to change Font Awesome icon color with different button state.

For example, I have these custom search and clear buttons as follows. I am also using Bootstrap and the class name btn is from Bootstrap.

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

and I've embedded the icon to the search button with :before Psuedo Class

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

I want to be able to change the darkorange to white when the button is on :focus.

Is there a way to do it with CSS?

This is JS Fiddle.

1
htmlcsstwitter-bootstrapfontsfont-awesome

1 Answers

1
votes

I believe you are looking for :active rather than :focus.

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

Take a look at the following fiddle.