Question

我在JSP页面中使用了Font Awesome图标，但IE在应用程序中显示了addtional 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>

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;和高度：0到css中的ico样式。

重复字体在IE9中显示的令人敬畏的图标

3 个答案: