如何堆叠fontawesome图标

Question

我正在尝试实现类似于附件中的那个。

以下是我的代码。我得到信封图标，但不知道如何通过放置另一个图标来获得预期的结果。

<i class="fa fa-envelope-o" aria-hidden="true"></i>

由于

Answer 1

试试这个：

＆＃13;

＆＃13;

.text-danger {
    color: #d9534f;
}
     

＆＃13;

   

 <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'/>
<div class="container">
    <span class="fa-stack fa-lg" aria-hidden="true">
      <i class="fa fa-camera fa-stack-1x"></i>
      <i class="fa fa-ban fa-stack-2x text-danger"></i>
    </span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将<i></i>放在一个范围内：检查Fontawesome examples

<span class="fa-stack fa-lg">
  <i class="fa fa-envelope-o fa-stack-2x"></i><!--Make background icon large-->
  <i class="fa fa-commenting-o fa-stack-1x"></i><!--make foreground icon smaller-->
</span>

让我知道它对你有用。 玩得开心

Answer 3

＆＃13;

＆＃13;

.wrap{

  display: inline-block;
  position: relative;
}
.wrap > .fa-commenting-o{
  position: absolute;
  top: -3px;
  left: 10px;
}

＆＃13;

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'/>


<div class="wrap">
  <i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
</div>

＆＃13;

＆＃13;

＆＃13;

你想这样吗？

Answer 4

您可以使用 CSS 属性重叠图标。试试这个

<span class="fa-stack fa-lg">
  <i class="fa fa-envelope-o fa-stack-2x"></i>
  <i class="fa fa-commenting fa-stack-2x" style="padding-left:22px;margin-top:-16px;z-index:232"></i>
</span>

在小提琴here

上查看