Search code examples
cssfont-awesomestacked

stack multiple font awesome icons

The following span aims to stack multiple fonts, via CSS class assignment

<span class="fa-stack fa">
  <i class="fa fa-heart fa-stack-1x"></i>
  <i class="fa fa-heart-o fa-stack"></i>
  <i class="fa fa-heart-o fa-stack"></i>
</span>

span i:nth-of-type(2n+2){
  margin-top:-10px;
  margin-left:3px;
}
span i:nth-of-type(3n+3){
  margin-top:7px;
  margin-left:8px;
}

The end result is that the second icon stack properly, but the third one is behaving as if it were outside were outside

fa-class is defined as

.fa-stack {
    position: relative;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    vertical-align: middle; }

What am I missing? Or is this possible ?

Solution

  • I think your mistake is using "nth-of-type(3n+3)" code cause I didn't find anything like this also

       <span class="fa-stack fa">
  <i class="fa fa-heart fa-stack-1x"></i>
  <i class="fa fa-heart-o fa-stack"></i>
  <i class="fa fa-heart-o fa-stack"></i>
    </span>

    you used same class fa-stack for container and inner elements I find out this solution it's still need to be improve but I beleive you will get the idea

    <div class="fa-stack">
  <i class="fa fa-heart"></i>
  <i class="fa fa-heart-o"></i>
  <i class="fa fa-heart-o"></i>
</div>

    this is html code I used div insted of span and deleted unnecesarry classes

    .fa-stack {
  position: relative;
  width: 100%;
  height: 50px;
}
.fa-stack i:first-child {
  position: absolute;
  left: 20px;
  top: 15px;
}

.fa-stack i:nth-child(2) {
  position: absolute;
  top: 10px;
  left: 23px;
}
.fa-stack i:nth-child(3) {
  position: absolute;
  top: 6px;
  left: 26px;
}

    and this is the css code I used position to change place of each heart how I want also in fa-class you can change font size etc and give icons % position instead of px this is the resultenter image description here