问题:

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?

回答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;
}

回答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)

回答3:

Font-Awesome icon size modification:

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

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

"font-size" property in CSS stylesheet (like the accepted answer shows)
```
.fa {
    font-size: 12px;
}
```

HTML tags

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

回答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-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>

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

The Docs for smart use icons is on Font Awesome Docs Sizing and scss use u will find as well.