How do I decrease the size of a font-awesome icon?

Question

What is the best way to decrease the size of a font awesome icon. There is a fa-3x, etc... to increase the size. Is there a class to decrease the size?

Answer 1

Font-Awesome icons, as the name suggests, are font-based. This means to decrease their size all you have to do is decrease their font-size:

.fa {
    font-size: 12px;
}

Answer 2

There are two Font Awesome classes to use if you need something simple: fa-xs and fa-sm.

The size equivalents are:

• fa-xs: .75em
• fa-sm: .875em

Sizing Icons | Font Awesome (more informations here)

Answer 3

Font-Awesome icon size modification:

1. "font-size" property in "style" attribute:

   <i class="fas fa-search" style="font-size: 25px;"></i>
   

2. "font-size" property in CSS stylesheet (like the accepted answer shows)

   .fa {
       font-size: 12px;
   }
   

3. HTML tags

   <small>
       <i class="fas fa-search"></i>
   </small>