Stacked Icons

We know that Font Awesome Icons are super useful, but what happens if you have a use case where you need to stack one icon on another icon to display as if they are merged and displayed as one.

Font Awesome has provided the below classes to achieve that

  • 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.
<span class="fa-stack">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x"></i>
</span>
<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>

Examples

We can check the outcome of the below HTML document to see how it looks.

<!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: 40px;">    
    <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

Font Awesome has provided predefined classes to create and use stacked icons as needed.

Related Links