title: How to set active class to web web-font icon generated from icomoon
body: <p>I created a set of icons from icomoon, I can set the hover style just like this </p>
  
  <pre><code>.icon-github:hover::before {
    color: #f1f1f1;
  }
  </code></pre>
  
  <p>but I am trying to set it to a specific color when it is an active class like this </p>
  
  <pre><code>.icon-home:before .active {
    color: #08FDD8 !important;
  }
  </code></pre>
  
  <p>all to no avail, this is how it looks like on HTML</p>
  
  <pre><code>&lt;li&gt;&lt;a&gt;&lt;span class="icon-twitter active"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>