Textbox font-awesome

Add font-awesome icon to the textbox

by Bhavanaditya D R

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<input type="email" placeholder="&#61447; Username" id="tutu" required/>

CSS

.wrapper input[type="text"] {
  position: relative;
}

input {
  font-family: 'FontAwesome';
}


/* This is for the placeholder */

.wrapper:before {
  font-family: 'FontAwesome';
  color: red;
  position: relative;
  left: -10px;
  content: "\f007";
}


/* This is for the Textbox */

#tutu {
  border-radius: 3px;
  border: 1px silver solid;
  padding-left: 10px;
  font-weight: bolder;
  color: #bcbcbc;
  height: 40px;
  width: 350px;
}