Font Awesome V4 - Stacked Icons Example

Using Font Awesome Icons within a web page is super easy

  • Include the icon library CDN within the head section of a document
  • Then access the icons using their predefined classes from the library

Here is the example that explains how to define Font Awesome Stacked Icons using the predefined classes.

  • Class fa-stack to be added to the parent element that includes the stacked icons
  • Class fa-stack-1x for the smaller icon of the stack
  • Class fa-stack-2x for the bigger icon of the stack
  • Class fa-inverse to use the alternative color of the icon, which is very useful when we want to stack both dark or light icons.

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 style="font-size: 20px;">    
    <h1>Stacked Icons</h1>
    <div>
        <span class="fa-stack">
            <i class="fa fa-square-o fa-stack-2x"></i>
            <i class="fa fa-twitter fa-stack-1x"></i>
        </span>
        fa-twitter on fa-square-o
    </div>
    <div>
        <span class="fa-stack">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
        </span>
        fa-flag on fa-circle
    </div>
    <div>
        <span class="fa-stack">
            <i class="fa fa-square fa-stack-2x"></i>
            <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
        </span>
        fa-terminal on fa-square
    </div>
    <div>
        <span class="fa-stack">
            <i class="fa fa-camera fa-stack-1x"></i>
            <i class="fa fa-ban fa-stack-2x"></i>
        </span>
        fa-ban on fa-camera
    </div>
</body>
</html>

Overall

This example helps us understand how to create Font Awesome Stacked Icons.

Related Links