How to Increase Font Awesome Icon Size with CSS?

Font Awesome is a very popular icon library that contains a collection of scalable vector icons that can be customized to suit different design needs. These icons are designed to be used on websites, web applications, and other digital products.

The library is widely used by web developers and designers to add icons to their websites and applications, without the need for creating their own graphics or images.

When you add a Font Awesome icon to your project, it is by default rendered in a very small size of 16px.

But in most cases, we need to customize(especially increase) the icon size to fit the design of our project.

As the Font Awesome icons are vector based, therefore, they can be scaled up or scaled down without losing their quality.

In this article, I’ll show you different ways of changing Font Awesome icon size:

• Increase Font Awesome icon size using the font-size property
• Increase Font Awesome icon size using built-in classes

Let’s discuss each method in detail.

1. Increase Font Awesome Icon Size using the font-size Property

The font-size property is the most straightforward way to increase or decrease the size of a Font Awesome icon in CSS.

By adjusting the value of the font-size property you can very easily make the icon bigger or smaller without losing its quality.

For example, if you want to make the icon bigger, you can pass a value higher than 16px to the font-size property as the default size of a font awesome icon is 16px.

Similarly, if you want to make the icon smaller, you can pass a value lower than 16px to the font-size property.

<div>
    <i class="fa fa-home"></i>
    <i class="fa fa-home medium"></i>
    <i class="fa fa-home bigger"></i>
    <i class="fa fa-home huge"></i>
</div>

Add the CSS:

.medium{
   font-size: 32px;
}
.bigger{
   font-size: 64px;
}
.huge{
   font-size: 80px;   
}

Output:

As you can see from the above output, passing a higher value to the font-size property makes the icon bigger without losing its quality.

You can adjust the value of the font-size property according to your need.

2. Increase Font Awesome Icon Size using Built-in Classes

The Font Awesome library provides a range of predefined classes that you can directly use in your HTML to adjust the icon size. These classes are as follows:

• fa-lg: This class makes the icon 33% larger than its default size.
• fa-2x: This class makes the icon twice as large as its default size.
• fa-3x: This class makes the icon three times as large as its default size.
• fa-4x: This class makes the icon four times as large as its default size.
• fa-5x: This class makes the icon five times as large as its default size.

You can directly use these classes in your HTML while specifying the icon class:

<div>
    <i class="fa fa-camera"></i>
    <i class="fa fa-camera fa-lg"></i>
    <i class="fa fa-camera fa-2x"></i>
    <i class="fa fa-camera fa-3x"></i>
    <i class="fa fa-camera fa-4x"></i>
    <i class="fa fa-camera fa-5x"></i>
</div>

Output:

While using these built-in classes to increase the size of the icon, you have to keep in mind that these classes increase the icon sizes relative to their container.

That means if the font-size of the container is higher, the icon size will also increase proportionally. Similarly, if the container size is smaller, the icon size will decrease. This can be useful in cases where you want the icon size to be responsive to the size of the container.

See the following example, where we have put the same icons in two different divs with different font sizes:

<div class="div1">
    <i class="fa fa-camera"></i>
    <i class="fa fa-camera fa-lg"></i>
    <i class="fa fa-camera fa-2x"></i>
    <i class="fa fa-camera fa-3x"></i>
    <i class="fa fa-camera fa-4x"></i>
    <i class="fa fa-camera fa-5x"></i>
</div>

<div class="div2">
    <i class="fa fa-camera"></i>
    <i class="fa fa-camera fa-lg"></i>
    <i class="fa fa-camera fa-2x"></i>
    <i class="fa fa-camera fa-3x"></i>
    <i class="fa fa-camera fa-4x"></i>
    <i class="fa fa-camera fa-5x"></i>
</div>

Set the font-size of both divs:

.div1{
   font-size: 10px;
}
.div2{
   font-size: 15px;
}

Output:

As you can see from the above output, the size of the icons in the second div is higher than those of the first ones because it has a higher value of font-size.

Conclusion

In this article, we learned what are Font Awesome icons and how we can increase or decrease their sizes without losing their quality.

In summary, If you want to change the size of a Font Awesome icon with CSS, you can use the font-size property.

To increase the size of the icon, use a higher value of the font-size property and to decrease the size of the icon, use a lower value of the font-size.

You can also use built-in classes fa-lg, fa-2x, fa-3x, fa-4x and fa-5x to increase the size of the icons relative to their container.

Thanks for reading.