html – Font Awesome sizing does not work – icon shows as small but the 'clickable' area is big-ThrowExceptions

Exception or error:

I have added in my font awesome html and css but when running it on a browser, the icons look tiny however it seems as if the actual icon size is big as expected as they are clickable in a larger area around each of the icons.

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>
How to solve:

The CSS is targeting the link element and not the icons

You need to change your CSS to

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

Leave a Reply

Your email address will not be published. Required fields are marked *