Search code examples
cssheightwidthfont-awesome

is there is any way to set height and width of font Awesome Icon to the full width and height of its parent container?

I want to set the height and width of the Font Awesome icon to the full width and height of its parent container.

CSS

.icon-container {
width:30px;
height:30px;
}
.fa-facebook-square {
//what should be here
//font-size is not working properly in this scenario
}

HTML

<div class="icon-container">
 <i class="fab fa-facebook-square"></i>
</div>
Solution

  • I gave an autowidth class to element after its own classes. Then give display inline-block to it and add with and height equal to 100% to take the parent's width and height.

    .icon-container {
width:60px;
height:60px;
}
.icon-container .autowidth {
  display: inline-block;
  width: 100%;
  height: 100%;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<div class="icon-container">
 <i class="fab fa-facebook-square autowidth"></i>
</div>