title: Duplicate Font Awesome icons showing up in IE9
body: <p>Im using Font Awesome icons in my JSP page , However IE shows addtional icon-16 icon-plus-sign in application.
  I have found the solution by referring to the 
  <strong><a href="https://stackoverflow.com/questions/11452356/duplicated-icon-issue-with-twitter-bootstrap-and-font-awesome">Duplicated icon issue with Twitter Bootstrap and Font Awesome</a></strong></p>
  
  <p>I tried to add the following to my <strong>bootstrap.css</strong> but didnt help</p>
  
  <pre><code>[class^="icon-"], [class*=" icon-"]{
      background:none;
    }
  </code></pre>
  
  <p>Im not sure How I do add the following to the font-awesome.css and the bootstrap.css </p>
  
  <pre><code>&lt;style type="text/css"&gt; .icon {background:none;} &lt;/style&gt; 
  </code></pre>
  
  <p>My JSP code that uses the Font Awesome icons "icon-16 icon-plus-sign" is as below</p>
  
  <pre><code>&lt;h:grid-check isCheckBoxRequired="false" checkedValue="${user.id}" id="user-${user.username}"/&gt;
                  &lt;h:grid-expand  rowId="${user.id}"
                                  childUrl="/admin/user/list/${user.id}/children.json"
                                  expandClass="icon-16 icon-plus-sign"
                                  collapseClass="icon-16 icon-minus-sign"/&gt;
  </code></pre>
  
  <p>However IE shows addtional icon-16 icon-plus-sign in application.
  The generated HTML code for IE while Debugging shows <strong>two  </strong></p>
  
  <p><strong>Internet Explorer</strong></p>
  
  <pre><code>&lt;td style="padding-top: 2px; padding-right: 2px; padding-bottom: 1px; padding-left: 2px;"&gt;
      &lt;a href="#" grid-child-url="/admin/user/list/25766383920481368/children.json" grid-expand="25766383920481368"&gt;
          &lt;i class="icon-16 icon-plus-sign" data-alt-class="icon-16 icon-minus-sign"/&gt;
  &lt;i class="icon-16 icon-plus-sign" data-alt-class="icon-16 icon-minus-sign"/&gt;
  </code></pre>