有没有办法将字体 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?有没有办法将字体 Awesome Icon 的高度和宽度设置为其父容器的全宽和高度？
【发布时间】：2020-08-27 21:04:51
【问题描述】：

我想将 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>

【问题讨论】：

标签： css height width font-awesome

【解决方案1】：

我在元素自己的类之后为元素提供了一个自动宽度类。然后给它 display inline-block 并加上 with 和 height 等于 100% 以获取父级的宽度和高度。

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

【讨论】：

【解决方案2】：

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

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


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

【讨论】：

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