Font Awesome V4 - Icon Sizes Example

Using Font Awesome Icons within a web page is super easy, where we need to include the icon library CDN within the head section of a document and access all icons using the icon classes.

Here is the example, where we have changed the size of Font Awesome Icons.

  • Using predefined size classes from Font Awesome library.
  • Change icon size by applying CSS font-size property to either increase or decrease the default icon size.

Run this on IDE

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <h1>Icon Sizes</h1>
    <p><i class="fa fa-cubes"></i> default</p>
    <p><i class="fa fa-cubes" style="font-size: 50px;"></i> 40px</p>
    <p><i class="fa fa-cubes" style="font-size: 10px;"></i> 10px</p>
    <h1>Predefined Sizes</h1>
    <div>
        <p><i class="fa fa-cubes"></i> default</p>
        <p><i class="fa fa-cubes fa-lg"></i> fa-lg</p>
        <p><i class="fa fa-cubes fa-2x"></i> fa-2x</p>
        <p><i class="fa fa-cubes fa-3x"></i> fa-3x</p>
        <p><i class="fa fa-cubes fa-4x"></i> fa-4x</p>
        <p><i class="fa fa-cubes fa-5x"></i> fa-5x</p>
    </div>
</body>
</html>

Overall

This example helps us understand different ways to change icon sizes of Font Awesome Icons.

Related Links