Putting search icon in search input, then centering both in page - html

Question

I've managed to get the search icon IN the input field, and can center the input field with margin: 0 auto and displaying it to block (but this keeps from the icon being in the field and keeps it at the right of the page, since it's on block - yet it's the only way I've managed to center it). New to HTML/CSS, so is there a proper way to do this? Looking to learn.
Currently have this code:
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
.search {
position: relative;
color: #aaa;
font-size: 16px;
}
.search input {
width: 500px;
height: 32px;
background: #fcfcfc;
border: 0;
border-bottom: 5px solid #000;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0 auto;
}
.search input {
text-indent: 32px;
}
.search .fa-search {
position: absolute;
top: 10px;
left: 10px;
}
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term" id="search" class="keyword">
</div>

Answer 1

The input is an inline element, consider centering the the wrapper which is a div (block element) on where you can use margin:auto. You may also use max-width to make it responsive on small screen:
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
.search {
position: relative;
color: #aaa;
font-size: 16px;
max-width: 500px;
width:100%;
margin:0 auto;
}
.search input {
width:100%;
height: 32px;
background: #fcfcfc;
border: 0;
border-bottom: 5px solid #000;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.search input {
text-indent: 32px;
}
.search .fa-search {
position: absolute;
top: 10px;
left: 10px;
}
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term" id="search" class="keyword">
</div>