重复的字体真棒图标出现在 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 在应用程序中显示附加图标 16 图标加号。 调试时为 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>

Answer 2

确保您使用的是没有图标部分的 Twitter Bootstrap css。

他们专门为这种情况提供了一个版本

如您所见，CSS 有 3 个主要版本：

• 完成：主 + 响应 + 图标
• 无图标：主 + 响应
• 没有响应行为：main + icon

link

//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css

请注意清除您的浏览器现金以获取其他论坛上发布的任何解决方案

Answer 3

只需添加 display: block;和 height:0 到 css 中的 ico 样式。