3

我在我的 JSP 页面中使用 Font Awesome 图标，但是 IE 在应用程序中显示了附加的 icon-16 icon-plus-sign。我通过参考 Twitter Bootstrap 和 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 在应用程序中显示了附加的 icon-16 icon-plus-sign。调试时为 IE 生成的 HTML 代码显示两个

IE浏览器

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

3 回答 3

8

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

<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>
于 2013-09-27T10:00:57.540 回答
1

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

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

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

  • 完成：主+响应+图标
  • 没有图标：主要 + 响应式
  • 没有响应行为：主+图标

关联

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

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

于 2013-10-04T02:09:52.920 回答
-1

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

于 2014-11-06T16:01:32.033 回答