title: How to keep an :active css style after clicking a link?
body: <p>I need help with creating an :active style after the icon has been clicked. I am using Font-awesome icons, and can't workout how to keep the icon a certain colour after the icon has been clicked, any help would be great, Thanks </p>
  
  <p>HTML Nav table:</p>
  
  <pre><code>&lt;table width="100" border="0" align="center" cellpadding="0" cellspacing="0"&gt;
            &lt;tr&gt;
              &lt;td height="59"&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-university fa-lg "&gt;&lt;/i&gt;&lt;/li&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td height="59"&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-camera-retro fa-lg"&gt;&lt;/i&gt;&lt;/li&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td height="59"&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-picture-o fa-lg"&gt;&lt;/i&gt;&lt;/li&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td height="59"&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-comments fa-lg"&gt;&lt;/i&gt;&lt;/li&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td height="59"&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-tachometer fa-lg"&gt;&lt;/i&gt;&lt;/li&gt;&lt;/td&gt;
            &lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <p>The CSS to create a colour hover over:</p>
  
  <pre><code>    .fa-university:hover {
  color: white;
  transition: all 500ms ease-in-out;
  </code></pre>
  
  <p>}</p>