title: I can't select font-awesome element using jquery
body: <p>COMPLETE CODE IN FIDDLE LINE 36 JAVASCRIPT IS ISSUE PART <a href="https://jsfiddle.net/ybp7gtup/7/" rel="nofollow">https://jsfiddle.net/ybp7gtup/7/</a></p>
  
  <p>I want to change the color of the icon using js or jquery as I am using form validation to change color on user behaviour. I can't seem to select the <code>&lt;i&gt;</code> in the DOM, can anyone advise?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="col-xs-1 col-md-1 icons-div"&gt;
          &lt;div class="row"&gt;
              &lt;i class="fa fa-user fa-color"&gt;&lt;/i&gt;
           &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>select:invalid {
      outline: none;
      box-shadow: 0 0 5px red;
  }
  
  select:valid {
      outline: none;
      box-shadow: 0 0 5px #449d44;
  }
  
  .fa {
      font-size: 3em;
  }
  
  .fa-calendar {
      font-size: 2.5em;
  }
  
  .hide-div .fa {
      font-size: 1em;
  }
  
  .red {
      color: #FFA5A5;
  }
  
  .green {
      color: #449d44;
  }
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>$('.fa-color').addClass('red');
  </code></pre>