how to size font awesome icons in css

Hello guys! In this post I have shared the details about “how to size font awesome icons in css”. Okay, let’s move on to the article.

how to size font awesome icons in css

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>
/* this icon from font awesome */
<div class="container">
	/* quote icon */
	<i class="fa-solid fa-quote-right"></i>
</div>

<style>
	.container 
      font-size: 28px;
	
</style
<div style="font-size: 0.5rem;">
  <i class="fas fa-camera fa-xs"></i>
  <i class="fas fa-camera fa-sm"></i>
  <i class="fas fa-camera fa-lg"></i>
  <i class="fas fa-camera fa-2x"></i>
  <i class="fas fa-camera fa-3x"></i>
  <i class="fas fa-camera fa-5x"></i>
  <i class="fas fa-camera fa-7x"></i>
  <i class="fas fa-camera fa-10x"></i>
</div>
<span style="font-size: 500px; color: Tomato;">
	<i class="fas fa-camera"></i>
</span>

Final Thoughts

I hope this post helps you to know about “how to size font awesome icons in css”. If you have any doubts regarding this post please let us know via the comment section. Share this tutorial with your friends and family via social networks.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coder Diksha. Here, I post about programming to help developers.

Share on:

Leave a Comment