如何堆疊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>