2

我正在尝试使用 HTML5 和 FontAwesome 制作网页。我的问题是：如果我包含一个 FontAwesome 图标，它会出现两次，并且两个副本都相互堆叠（见那里：图片）

我更改了一些 fontawesome.css，但在我认识到问题后，我再次从下载中复制了文件以重置我的所有更改：问题仍然存在。所以我的 .css 部分说：

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

我把它包括在标题中

<h3><i class="icon-star-empty"></i>&nbsp;Angebote</h3>

不幸的是，我并没有真正看到问题所在。

我尝试删除 .css 中的“:before”（它到底有什么作用？），玩“display:”，添加“vertical-alignment”，因为星星有点在天空中......没有任何帮助。

有人遇到过类似的事情吗？该问题出现在 Firefox、Opera 和 IE 上。

最好的问候，安娜

4

4 回答 4

5

如果您忘记<i>正确关闭标签，您可能会得到类似的行为 我有多个图标

<i class="fa fa-user-circle">

代替

<i class="fa fa-user-circle"></i>
于 2020-07-27T22:21:38.760 回答
2

我自己也遇到了这个问题，我想出了我需要解决的问题。在 bootstrap.css 中删除

.icon-star-empty {   background-position: -144px 0; }

基本上css在两个地方，一次在bootstrap.css，一次在font-awesome.css，所以它显示了两次。

于 2012-12-13T13:47:39.943 回答
0

我可以进一步详细说明，但基本上这个问题不应该出现在 3.0（几周前发布）中。

这来自 Bootstrap 在其 sprites.less 中图标类的设置类。说明说要注释掉 sprites.less，但很多人都忽略了这一点。在新版本中，有解决此问题的替代方案。

另外，如果你想让 Font Awesome 的使用变得非常简单，你可以使用 Bootstrap CDN：http ://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

于 2013-01-18T01:42:20.780 回答
0

只需这样做

.fa-heart:before{content: '';}
于 2018-12-30T17:02:22.947 回答