CODEWITHSUNDEEP
cssfont-awesome
Mukil Deepthi
Mukil Deepthi

Reputation: 6482

How to stack fontawesome icons

I am trying to implement similar to the one in the attachment.

enter image description here

Below is my code. i get the envelope icon but dont know how to get the expected result by placing another icon.

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

Thanks

Upvotes: 0

Views: 3404

Answers (4)

Sangrai
Sangrai

Reputation: 687

Try this:

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

Upvotes: 2

Ravee Sunshine
Ravee Sunshine

Reputation: 386

You can overlap icons using CSS property. Try this

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

check it on fiddle here

Upvotes: 1

kyun
kyun

Reputation: 10294

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

Do you want like this?

Upvotes: 2

Mwangi Thiga
Mwangi Thiga

Reputation: 1379

Place your <i></i>s in a span like: Check 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>

Let me know how it works for you. Have fun

Upvotes: 1

Related Questions