title: Insert check icon inside input box when text is present
body: <p>I am attempting to insert a green check icon when text is inside an input box.  I am trying to do this by adding in a fa-fa icon, but it does not seem to be working.  In addition, I would like to place a red x icon inside the input box if the email is not valid.  If someone has any insight how to do this your help would be greatly appreciated! Fiddle and image are attached.</p>
  
  <p><a href="https://i.stack.imgur.com/92MEd.png" rel="nofollow noreferrer">Green Check and Rex x icons</a></p>
  
  <p><a href="https://jsfiddle.net/50hrztxq/" rel="nofollow noreferrer">JsFiddle</a></p>
  
  <pre><code>&lt;form action=""&gt;
      &lt;div class="container" id="container"&gt;
          &lt;label&gt;First Name
            &lt;input id="first_name" maxlength="40" name="first_name" size="20" type="text"&gt;&lt;i class="fa fa-check-circle" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/label&gt;
          &lt;label&gt;Last Name
            &lt;input id="last_name" maxlength="80" name="last_name" size="20" type="text"&gt;
          &lt;/label&gt;
          &lt;label&gt;Email
            &lt;input id="email" maxlength="80" name="email" size="20" type="text"&gt;&lt;i class="fa fa-times-circle-o" aria-hidden="true"&gt;&lt;/i&gt;
  &lt;!--            &lt;span class="msg error"&gt;Wrong email!&lt;/span&gt;
              &lt;span class="msg success"&gt;Correct email!&lt;/span&gt; --&gt;
          &lt;/label&gt;
          &lt;label&gt;Phone
            &lt;input id="phone" maxlength="40" name="phone" size="20" type="text"&gt;
          &lt;/label&gt;
          &lt;label&gt;City
            &lt;input id="city" name="city" maxlength="40" size="20" type="text"&gt;
          &lt;/label&gt;
          &lt;label&gt;State/Province 
              &lt;input id="state" maxlength="20" name="state" size="20" type="text"&gt;
          &lt;/label&gt;
          &lt;label id="company"&gt;Company
            &lt;input id="company" name="company" type="text"&gt;
          &lt;/label&gt;
          &lt;label&gt;Comments 
            &lt;textarea name="" id="" cols="30" rows="10"&gt;&lt;/textarea&gt;
           &lt;button type="submit" name="submit"&gt;SUBMIT&lt;/button&gt;
          &lt;/label&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  body {
    color: #fff;
    background-color: #f78e2a;
    text-align: center;
  }
  
  form {
    color: #fff;
    background-color: #f78e2a;
    text-align: center;
    font-family: Lato;
  }
  
  * {
    box-sizing: border-box;
  }
  
  h1 {
    font-size: 20px;
    text-align: center;
  }
  
  
  input[type="text"] {
      width: 100%;
      padding: 10px;
      background-color: #f9a558;
      border: 1px solid #fff;
  }
  
  input[type="text"]:focus {
      background-color: #fff;
  }
  
  input[type="text"]:visited {
      background-color: #fff;
  }
  .container {
    display: flex;
    flex-direction: column;
    padding: 5px 0;
    margin-left: 10%;
    margin-right: 10%;
  }
  
  textarea {
    width:100%;
    background-color: #f9a558;
    border: 1px solid #fff;
  }
  
  textarea:focus {
    background-color: #fff;
  }
  
  #company {
    flex-basis: 100%;
    max-width: 100%;
  }
  
  label:nth-last-child(-n+2)
  {
    flex-basis: 100%;
    max-width: 100%;
  }
  
  
  select, label {
      height: 50px;
      width: 48%;
      margin: 2% 1%;
      text-align: left;
  }
  
  
  button {
    margin-top: 10px;
    background-color: #B9B9B9;;
    color: #959595;
    border-radius: 6px;
    width: 120px;
    height: 35px;
    margin-left: 1%;
    display: block;
  }
  
  .fa fa-check-circle {
    color: green;
  }
  
  button:focus{
    background-color: #fff;
    color: #f78e2a;
  }
  
  
  
  
  @media (max-width: 426px) {
    label {
      width: 98%;
    }
  
  }
  
  @media (min-width: 426px) {
    .container {
      flex-direction: row;
      flex-wrap: wrap;
      align-self: flex-start;
    }
  
  
  }
  </code></pre>