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

在元素自己的类之后，我给元素提供了一个autowidth类。然后给它显示内联块，并在其中添加高度和高度等于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>

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

2 个答案: