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?

score 64 · Accepted Answer · answered Aug 13 '15 at 15:19

64

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

answered Aug 13 '15 at 15:19

James Donnelly

126,410
34
208
218

2

To add to his answer, almost everything you can do to a font you can do to the icons. Colors, sizes, spacing ect. ect. all get changed as if it were a font. Super simple! – Adam Buchanan Smith Aug 13 '15 at 21:22

score 35 · Answer 2 · edited May 10 '23 at 16:15

35

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 information's here)

edited May 10 '23 at 16:15

gef

7,025
4
41
48

answered Jun 16 '18 at 22:28

Veronica B.

351
3
3

3

in v4 I do:. in v5: fa-xs/fa-sm – mortenma71 Oct 16 '18 at 13:24

Ralf · Answer 3 · 2021-01-13T09:32:17.953

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>
```

score 3 · Answer 4 · edited Jul 05 '20 at 00:06

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.

score 1 · Answer 5 · answered Jun 17 '20 at 17:52

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

answered Jun 17 '20 at 17:52

Consule

1,059
12
12

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

5 Answers5

Linked