How do I decrease the size of a font-awesome icon?
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)
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.
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>
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>
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;
}