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:

::before {
    font-size: 130px;
}

Answer 2

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>
   

4. Using Fontawesome classes so that the icons take a size relative to their parent elements:

    <i class="fas fa-search fa-sm"></i>
   
    <i class="fas fa-search fa-lg"></i>
   

Answer 3

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 4

One way is your internal CSS class or use default Font Awesome class:

<i class="fas fa-camera fa-xs"></i>

<i class="fas fa-camera fa-sm"></i>

<i class="fas fa-camera fa-md"></i>

<i class="fas fa-camera fa-lg"></i>

<i class="fas fa-camera fa-2x"></i>

and keep going wit fa-4x and so one.

The Docs for smart use icons can be found here Font Awesome Docs Sizing and css you could use will find documented there as well.

Answer 5

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)