重复的字体真棒图标出现在 IE9 中

Posted 2023-03-06

技术标签:

【中文标题】重复的字体真棒图标出现在 IE9 中【英文标题】：Duplicate Font Awesome icons showing up in IE9 【发布时间】：2013-09-30 16:13:45 【问题描述】：

我在我的 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"/>

【问题讨论】：

我应该添加 [class^="icon-"], [class*="icon-"] background:none; to font-awesome.css ? 【参考方案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>

【讨论】：

我的JSp页面代码是我将如何使用您的建议？ @ronan 我不知道jsp，反正试试这样。

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

【参考方案2】：

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

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

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

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

link

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

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

【讨论】：

【参考方案3】：

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

【讨论】：