Question

我正在尝试制作一个包含HTML5和FontAwesome的网页。我的问题是：如果我包含一个FontAwesome图标，它会出现两次，并且两个副本彼此堆积在一起（参见：image）

我更改了一些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中的“：之前”（无论如何都要做什么？），玩“display：”，添加“vertical-alignment”，因为星星在空中有点......没什么帮助

有人有类似的东西？问题出现在Firefox，Opera和IE上。

祝你好运，安娜

Answer 1

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

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

基本上css在2个位置，一次在bootstrap.css＆amp;一旦在font-awesome.css中，它就会显示两次。

Answer 2

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

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

代替

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

Answer 3

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

这是来自sprites.less中icon-classes的Bootstrap设置类。指示说要评论spritees.less，但很多人都错过了。在新版本中，有一些替代可以解决此问题。

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

Answer 4

只需执行

.fa-heart:before{content: '';}

HTML：fontawesome图标出现两次

4 个答案: