title: Change icon size on mouse over - (FontAwesome + Bootstrap)
body: <p>I want to display a 2x icon size on mouse over  element.</p>
  
  <p>I'm using FontAwesome with bootstrap.
  I have a List like this:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href ="#"&gt;&lt;i class="icon-inbox"&gt;&lt;/i&gt; Inbox&lt;a/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href ="#"&gt;&lt;i class="icon-print"&gt;&lt;/i&gt; print&lt;a/&gt;&lt;/li&gt;
      ....
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to add "icon-2x" fontawesome css class, on mouse over element, to display a larger icon, and remove that class on mouse leave.</p>
  
  <p>I want it to look like the FontAwesome homepage examples. like this:</p>
  
  <p><img src="https://i.stack.imgur.com/XZxMR.png" alt="enter image description here"></p>
  
  <p>I tried finding  elemets with jQuery to add the css class, but a couldn't do it.</p>
  
  <p>Can anyone help me?</p>
  
  <p>Thanks </p>