Duplicate Font Awesome icons showing up in IE9

Question

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 Duplicated icon issue with Twitter Bootstrap and Font Awesome

I tried to add the following to my bootstrap.css but didnt help

[class^="icon-"], [class*=" icon-"]{
    background:none;
  }

Im not sure How I do add the following to the font-awesome.css and the bootstrap.css

<style type="text/css"> .icon {background:none;} </style>

My JSP code that uses the Font Awesome icons "icon-16 icon-plus-sign" is as below

<h:grid-check isCheckBoxRequired="false" checkedValue="${user.id}" id="user-${user.username}"/>
                <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"/>

However IE shows addtional icon-16 icon-plus-sign in application. The generated HTML code for IE while Debugging shows two

Internet Explorer

<td style="padding-top: 2px; padding-right: 2px; padding-bottom: 1px; padding-left: 2px;">
    <a href="#" grid-child-url="/admin/user/list/25766383920481368/children.json" grid-expand="25766383920481368">
        <i class="icon-16 icon-plus-sign" data-alt-class="icon-16 icon-minus-sign"/>
<i class="icon-16 icon-plus-sign" data-alt-class="icon-16 icon-minus-sign"/>

Should I add [class^="icon-"], [class*=" icon-"]{ background:none; } To font-awesome.css ? — ronan

devo devo · Accepted Answer · 2013-09-27T10:00:57

You should use separate closing tag for icon like this,

<i class="icon-16 icon-plus-sign"></i>

So try like this,

<h:grid-check isCheckBoxRequired="false" checkedValue="${user.id}" id="user-${user.username}"> </h:grid-check> 
<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"> </h:grid-expand>

Duplicate Font Awesome icons showing up in IE9

3 Answers