CSS（Font Awesome） - 在不使用Javascript的情况下改变不同按钮状态下的图标颜色

Question

根据标题，我想知道如何更改Font Awesome状态不同的Bootstrap图标颜色。

例如，我有以下自定义button和search按钮。 我也使用JS Fiddle，类名clear来自Bootstrap。

btn

我已使用<button class="btn search">Search</button> <button class="btn clear">Clear</button> Psuedo Class

将图标嵌入search按钮

:before

我希望能够将.search:before { font-family: 'FontAwesome'; content: "\f002"; margin-right: 5px; color: darkorange; } 更改为darkorange 按钮位于white。

有没有办法用CSS做到这一点？

这是{{3}}。

Answer 1

我相信您正在寻找:active而不是:focus。

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

请查看以下fiddle。