Question

<div>
<ul class="social-icon">
    <li>
        <a href="#" class="social-facebook">
          <i class="fa fa-facebook"></i>
          <i class="fa fa-facebook ff"></i>
        </a>
    </li>
</ul>
</div>

我想在同一个位置显示这两个图标，就像一个图标......请帮助我。对不起，我的英语不好。 Here is jsfiddle editor link

Answer 1

使用以下css：

.social-facebook {
  position:relative;
}

.fa-facebook {
  position: absolute;
  top: 0px;
  left: 0px;
}

注意：您可以根据自己的喜好调整左/上属性。

这里有更新的小提琴：http://jsfiddle.net/2N2YF/32/

Answer 2

.fa { position: absolute; left: 10px; top: 10px;}

这应该可以解决问题

Answer 3

继承人：fiddle example

<div>
<ul class="social-icon">
    <li>
        <a href="#" class="social-facebook" style="position: relative;">
          <i class="fa fa-facebook" style="list-style: none; position: absolute; left: 0px; top: 0px;"></i>
          <i class="fa fa-facebook ff" style="list-style: none; position: absolute; left: 0px; top: 0px;"></i>
        </a>
    </li>
</ul>

如何使用css在同一位置显示2个元素？

3 个答案: