css - 重复的 Font Awesome 图标出现在 IE9 中

Question

我在我的 JSP 页面中使用 Font Awesome 图标，但是 IE 在应用程序中显示附加的 icon-16 icon-plus-sign。我通过引用找到了解决方案<强> Duplicated icon issue with Twitter Bootstrap and Font Awesome

我试图将以下内容添加到我的 bootstrap.css 但没有帮助

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

我不确定如何将以下内容添加到 font-awesome.css 和 bootstrap.css

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

我使用 Font Awesome 图标“icon-16 icon-plus-sign”的 JSP 代码如下

<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"/>

但是 IE 会在应用程序中显示 addtional icon-16 icon-plus-sign。调试时为 IE 生成的 HTML 代码显示两个

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"/>

Answer 1

您应该为这样的图标使用单独的结束标记，

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

所以这样试试，

<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>