如何堆叠fontawesome图标

Question

我试图实现类似附件中的一个。

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

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

感谢

Answer 1

.wrap{ 
 

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

<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>

你想这样吗？

Answer 2

将您<i></i> S IN的跨度，如：检查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

您可以使用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

Answer 4

试试这个：

.text-danger { 
 
    color: #d9534f; 
 
} 
 

 

 
<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>