有什么方法可以将字体 Awesome Icon 的高度和宽度设置为其父容器的完整宽度和高度？

Question

我想将 Font Awesome 图标的高度和宽度设置为其父容器的完整宽度和高度。

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>

Answer 1

检查这个 ->
https://jsfiddle.net/2na108rc/1/

 <i class="fab fa-facebook-square"></i>


.fa-facebook-square {
   font-size: 200px;
   font-weight: 900;
 }

Answer 2

我在元素 class 之后给它一个自动宽度 class。然后给它display inline-block加上with和height等于100%来取parent的width和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>

有什么方法可以将字体 Awesome Icon 的高度和宽度设置为其父容器的完整宽度和高度？

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

css

height

width

font-awesome