title: Using Font-Awesome - In Chrome, icons displayed via <i class="icon-ok"></i> markup do not show any style and do not trigger any events on it
body: <p>I am using Font-Awesome which is iconic font for use with Twitter Bootstrap. </p>
  
  <p>Markup - </p>
  
  <pre><code>&lt;i class="icon-remove reset-preference-button"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>CSS - </p>
  
  <pre><code>.reset-preference-button {
  cursor: pointer;
  }
  </code></pre>
  
  <p>JavaScript - </p>
  
  <pre><code>$(".reset-preference-button").on("click", function() {
  // ... do something
  });
  </code></pre>
  
  <p>When I render the page, the cursor does not change to pointer when hovered over the element. Also nothing happens when I click on the icon. I made sure that the icon exists before I bind the event.</p>
  
  <p>Note that I am using element &amp; not anything else. Seems like when I explicitly set the style for this element to <code>"display: inline-block;"</code> it works fine.</p>
  
  <p>This according to my tests happens only on Chrome. Works fine in Firefox &amp; IE. My current Chrome version is 18 but it affects other versions as well.</p>
  
  <p>I have already filed a bug at <a href="https://github.com/FortAwesome/Font-Awesome/issues/157" rel="nofollow noreferrer">https://github.com/FortAwesome/Font-Awesome/issues/157</a></p>