Font Awesome Icon Stacking with React

Our goal for this article is to recreate the icons shown below.

As we can see, this consists of three icons stacked on top of each other. Namely fa-folder, fa-react-logo and fa-layers-counter, a feature new to Font Awesome 5 that makes it easy to add numbers to icons.

You might be tempted to just add these components to the same span and hope for the best. Let's try that and see what happens.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFolderBlank, faReact } from "@fortawesome/free-solid-svg-icons";

<span>
  <FontAwesomeIcon icon={faFolderBlank} />
  <FontAwesomeIcon icon={faReact} />
  <span className="fa-layers-counter">12</span>
</span>

Well, this isn't quite what we wanted. The icons are all next to each other and it looks like the counter didn't show up at all (funnily enough it showed up at the top right corner of this page and had to be omitted).

By default, Font Awesome icons are displayed inline. This means that they will be displayed next to other elements, which is normally fine, but for our use case this needs to be changed. To instead display icons on top of each other, we can add the fa-layers class to the tag surrounding the icons.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFolderBlank, faReact } from "@fortawesome/free-solid-svg-icons";

<span className="fa-layers">
  <FontAwesomeIcon icon={faFolderBlank} />
  <FontAwesomeIcon icon={faReact} color={"white"} fontSize={32} />
  <span className="fa-layers-counter">12</span>
</span>

As we can see, simply adding the fa-layers class and adjusting the icon sizes with the fontSize prop gets us really close to our desired outcome, with the only remaining issue being odd alignment of the counter which we will address with a quick detour.

Sometimes when working with icon stacking, the icons will never align for seemingly no reason. You correctly use fa-layers and fontSize to get the icons to stack, but no matter what you do, they never align. This is where the fa-fw (fixed-width) class comes in. Which like the name implies, gives each icon the same width.

Let's look at an example and see how fa-fw can help.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHome, faCog } from "@fortawesome/free-solid-svg-icons";

<span className="fa-layers">
  <FontAwesomeIcon icon={faHome} color="gray" />
  <FontAwesomeIcon icon={faCog} fontSize={40} color="black"/>
</span>

As we can see, the icons don't align even though they are correctly layered. Now let's try with fa-fw.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHome, faCog } from "@fortawesome/free-solid-svg-icons";

<span className="fa-layers fa-fw">
  <FontAwesomeIcon icon={faHome} color="gray" />
  <FontAwesomeIcon icon={faCog} fontSize={40} color="black"/>
</span>

Awesome! With just a single class we were able to fix the alignment issue.

With fa-fw covered, we are ready to resolve the counter alignment issue. Let's take a look at the final code.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFolderBlank, faReact } from "@fortawesome/free-solid-svg-icons";

<span className="fa-layers">
  <FontAwesomeIcon icon={faFolderBlank} />
  <FontAwesomeIcon icon={faReact} color={"white"} fontSize={32} />
  <span className="fa-layers-counter">12</span>
</span>

With that we have successfully recreated the icons from the beginning of this article.

In this article we covered how to use Font Awesome's fa-layers class to stack icons on top of each other. We also covered how to use fa-fw to fix alignment issues that can arise when using fa-layers. Overall this is a very useful feature and big improvement over the old method of stacking icons using fa-stack.