FontAwesome in Background Image

#Markup

<div class='input-container'>
<div class="icon-ph"><i class="icon-envelope"></i></div>
<input class="custom-text" type="text" placeholder="Email address">
</div>

#CSS

.icon-ph {
display: inline-block;
width: auto;
height: auto;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 20px;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
background-color: #eeeeee;
position:absolute;
left:3px;
top:3px;
bottom:3px;
z-index:3;
}

.custom-text {
padding:6px 6px 6px 30px ;
}

.input-container {
position:relative;
}