FontFace & Font Awesome in CSS

# Use Font-face to incorport the font before using this:

.element {
    position: relative;
}

/*replace the content value with the
corresponding value from the list below: \f002 - icon; search \f004 -icon-heart

.element:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

Find content code here: http://astronautweb.co/snippet/font-awesome/

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;
}