title: How to change font-awesome icon color when it is active
body: <p>How to change font-awesome icon color when it is active, I have a menu with font-awesome links and I would like change the icons colors when is active, some can help  on this?</p>
  <p>I did read about states: <a href="https://smacss.com/book/state" rel="nofollow noreferrer">https://smacss.com/book/state</a>  but still not working in my code, its a way to make this work? thank you.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
    list-style-type: none;
    li {
      padding: 10px;
      border-top: 1px solid blue;
      &amp;:first-child {
        border: none;
      }
      i {
        color: black;
        &amp;:hover {
          color: white;
          background-color: blue;
        }
      }
      &amp;:hover {
        background-color: blue;
        color: white;
      }
      &amp;:active {
        background-color: yellow;
        color: black;
      }
      &amp;:focus {
        background-color: red;
        color: white;
      }
    }
  }
  
  ul {
    list-style-type: none;
  }
  
  ul li {
    padding: 10px;
    border-top: 1px solid blue;
  }
  
  ul li:first-child {
    border: none;
  }
  
  ul li i {
    color: black;
  }
  
  ul li i:hover {
    color: white;
    background-color: blue;
  }
  
  ul li:hover {
    background-color: blue;
    color: white;
  }
  
  ul li:active {
    background-color: yellow;
    color: black;
  }
  
  ul li:focus {
    background-color: red;
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;a class="menu" data-toggle="tooltip" data-placement="bottom" title="home"&gt;
        &lt;i class="fa fa-bars fa-2x" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a class="search"&gt;&lt;i class="fa fa-search fa-2x" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>