Font Awesome sizing не работает - значок отображается маленьким, но область «кликабельна» большая

Question

Я добавил в свой шрифт потрясающие html и css, но при запуске его в браузере значки выглядят крошечными, однако кажется, что фактический размер значков большой, как и ожидалось, так как они кликабельны в большей области вокруг каждого из значков.

введите описание изображения здесь

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