Font Awesome大小不起作用-图标显示为小但'clickable'区域较大

Question

我已经在字体中添加了很棒的html和css，但是在浏览器上运行时，图标看起来很小，但是实际图标的大小似乎像预期的那样大，因为它们可以在每个图标周围的较大区域中单击。

enter image description here

.social a {
  font-size: 7.5em !important;
  padding: 3rem;
}

	<div class="container-fluid padding">
		<div class="row text-center padding">
			<div class="col-12">
				<h2>Connect</h2>
			</div>
			<div class="col-12 social padding">
				<a href="#"><i class="fab fa-facebook"></i></a>
				<a href="#"><i class="fab fa-twitter"></i></a>
				<a href="#"><i class="fab fa-instagram"></i></a>
				<a href="#"><i class="fab fa-youtube"></i></a>
			</div>
		</div>
	</div>

Answer 1

CSS的目标是链接元素，而不是图标

您需要将CSS更改为

.social i {
  font-size: 7.5em !important;
  padding: 3rem;
}

.social i {
  font-size: 7.5em !important;
  padding: 3rem;
}

<div class="container-fluid padding">
  <div class="row text-center padding">
    <div class="col-12">
      <h2>Connect</h2>
    </div>
    <div class="col-12 social padding">
      <a href="#"><i class="fab fa-facebook"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fab fa-youtube"></i></a>
    </div>
  </div>
</div>