title: I need to change the color of the icon on text input focus
body: <p>I would like to incorporate a form focus feature where it changes the 
  color of each icon when you focus on that specific field</p>
  
  <pre><code>&lt;div id="rightside"&gt;
              &lt;div th:replace="fragments/loginform"&gt;
              &lt;form method="post" id="login" th:object="${credential}"&gt;
       &lt;p id="errors" class="warning" role="alert"&gt;
              &lt;span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/&gt;
          &lt;/p&gt;      
       &lt;p id="block"&gt;
  
         &lt;label for="username" class="has-feedback"&gt;&lt;i class="fa fa-user" aria-hidden="true"&gt;&lt;/i&gt;&lt;/label&gt;   
  
         &lt;span th:if="${openIdLocalId}"&gt;
                  &lt;strong&gt;
                      &lt;span th:utext="${openIdLocalId}"/&gt;
                  &lt;/strong&gt;
                  &lt;input type="hidden"
                         id="username"
                         name="username"
                         th:value="${openIdLocalId}"/&gt;
              &lt;/span&gt;
  
              &lt;span th:unless="${openIdLocalId}"&gt;
                  &lt;input class="required textinput has-feedback"
                         placeholder="UH Username"
                         id="username"
                         size="14"
                         tabindex="1"
                         type="text"
                         th:field="*{username}"
                         th:accesskey="#{screen.welcome.label.netid.accesskey}"
                         autocomplete="off"
                         autocapitalize="off"
                         autocorrect="off"
                         required="required"
                         autofocus="autofocus"
                  /&gt;
              &lt;/span&gt;
         &lt;/p&gt; 
  
        &lt;p id="block"&gt;
          &lt;label for="password" class="fontawesome-lock"&gt;&lt;i class="fa fa-lock" aria-hidden="true"&gt;&lt;/i&gt;&lt;/label&gt; 
  
                  &lt;input class="required textinput"                       
                         placeholder="Password"
                         type="password"
                         id="password"
                         name="password"
                         size="14"
                         tabindex="2"
                         th:accesskey="#{screen.welcome.label.password.accesskey}"
                         th:field="*{password}"
                         autocomplete="off"
                         required="required"                   
                   /&gt;                                     
        &lt;/p&gt;
  </code></pre>
  
  <p>Here is the CSS</p>
  
  <pre><code>#rightside {
      margin-top: 15px;
      float: left;
      width: 70%;
  }
  #rightside h3 {
      font-size: 110%;
  }
  #rightside a {
      display: block;
  }
  #rightside input.textinput {
      width: 60%;
      float: left;
      padding-left: 5px;
      height: 35px;
      border-radius: 7px;
  }
  #rightside input.textinput:focus {
      outline-width: 0;
  }
  #rightside form label {
      background-color: #e1e1e1;
      border-radius: 8px 0px 0px 8px;
      border: solid 1px #CCC;
      border-right: 1px solid #CCC;
      color: #000;
      display: block;
      float: left;
      line-height: 50px;
      text-align: center;
      font-size: 20px;
      width: 15%;
      height: 50px;
  }
  #rightside form input[type="text"] {
      float: left;
      background-color: #fff;
      border-radius: 0px 8px 8px 0px;
      color: #000;
      padding: 0 3%;
      width: 77%;
      height: 50px;
  }
  #rightside form input[type="password"] {
      float: left;
      background-color: #fff;
      border-radius: 0px 8px 8px 0px;
      color: #000;
      padding: 0 3%;
      width: 77%;
      height: 50px;
  }
  #rightside form input[type="submit"] {
      float: left;
      background: #e1e1e1;
      width: 99%;
      height: 50px;
      border-radius: 5px;
      border: solid 1px #978257;
      margin-bottom: 1.5em;
      color: black;
      cursor: pointer;
      transition: background 0.3s ease-in-out;
      font-weight: 600;
  }
  #rightside form input[type="submit"]:hover {
      background: #b6985a;
      color: #fff;
  }
  </code></pre>
  
  <p>When the user focuses on either text field, the font-awesome icon pertaining to that input field should change color.  Any help would be great!  Thanks!  CSS only would be preferable, but a js would work too</p>