Cacher is the code snippet organizer for pro developers

/* Fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);

/* fontawesome */
/*@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}*/

/* Simple Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* body */
body {
  background: #e9e9e9;
  color: #5e5e5e;
  font: 400 87.5%/1.5em 'Open Sans', sans-serif;
}

/* Form Layout */
.form-wrapper {
  background: #fafafa;
  margin: 3em auto;
  padding: 0 1em;
  max-width: 370px;
}

h1 {
  text-align: center;
  padding: 1em 0;
}

form {
  padding:  1.5em;
  
}

.form-item {
  margin-bottom: 0.75em;
  /* width: 100%; */
}

label {
display: inline-block;
  float: left;
}

.form-item input {
  background: #fafafa;
  border: none;
  border-bottom: 2px solid #fafafa;
  color: #666;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  height: 40px;
  position: relative;
  bottom: 4px;
  transition: border-color 0.33s linear;
  /* width: 100%; */
  display: inline-block;
  /* float: left; */
}
input:focus{
    outline: 0;
}

.form-item input:hover {
  border-bottom: 2px solid #c0c0c0;
  outline: none;
}


[class^="icon-"], [class*=" icon-"] {
    height: 32px;
    width: 32px;
    display: inline-block; 
    fill: gray; 
}

<script src="https://fontastic.s3.amazonaws.com/fmz2ZLp3CDuiA4xWon4VC4/icons.js"></script>

<div class="form-wrapper">
  <h1></h1>
  <form>
    <div class="form-item">
      <svg class="icon-at-sign-1-512"><use xlink:href="#icon-at-sign-1-512"></use></svg>
      <input type="email" name="email" required="required"></input>
    </div>
    
  </form>

</div>