JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<button class="btn search">Search</button>
<button class="btn clear">Clear</button>

CSS

.btn:focus {
    background-color: orange;
}
.btn:hover, .btn:focus {
    background-position: 0;
}
.search, .clear {
    padding: 3px 0;
    margin-right: 5px;
    width: 100px;
    float: left;
}
.search:before {
    font-family: 'FontAwesome';
    content: "\f002";
    margin-right: 5px;
    color: darkorange;
}
.clear:before {
    font-family: 'FontAwesome';
    content: "\f00d";
    margin-right: 5px;
    color: darkorange;
}
.btn:focus,.clear:before {
    font-family: 'FontAwesome';
    content: "\f002";
}