I’ve been playing around with using Font Awesome for icons lately. This is pretty common knowledge stuff but that doesn’t mean I won’t forget how to do it so figured I’d best write it down.

Step 1 of course is including Font Awesome inside your head tags. Something along the lines of this:

<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

The simplest way to add an icon is just by adding a class to an empty tag:

<i class="fa-solid fa-dungeon"></i>

From that code we get this:

OK but where does that code come from? You have to look it up on the Font Awesome site. Make sure you click the “Free Icons” toggle unless you’re paying for FA.

You can change the color of the icon via CSS in the same way you’d change any text color. You can change the size the same way (via font-size) OR you can add more classes:

<i class="fa-solid fa-dungeon fa-lg"></i>

results in:

There are also literal sizing classes: fa-1x, fa-2x… fa-10x
You can read up on sizing icons in the official documentation.

So at long last let’s get to layering, which is the point of this blog post. Layering is my term, Font Awesome calls it stacking which is more accurate but in my brain I liken it to layers in a graphics program. Here’s their documentation on it.

And here’s an example.

This is the code behind that icon. This is 3 stacked icons: a solid circle, the RSS icon, then a hollow circle. Initially the hollow circle is the same color as the solid circle, but it changes color on hover (roll your mouse cursor over it to see what I mean). Note that you need a span or something wrapping all your layers.
<a href="https://smithtalkstech.com/feed/">
<span id="rss_icon" class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-rss-square fa-stack-1x rss-icon"></i>
<i class="fa-regular fa-circle fa-stack-2x icon-border"></i>
</span>
</a>

So what does this all mean? The first span is a container for the stacked icons. The fa-stack class is what indicates this is a container for stacked icons. If you’re interested, here is the CSS behind fa-stack:

display: inline-block;
height: 2em;
line-height: 2em;
position: relative;
vertical-align: middle;
width: 2.5em;


fa-lg is controlling the size of the icon stack

For the first actual icon, the combination of “fa fa-circle” are the classes for a solid circle, fa-stack-2x sets this to be twice as large as the standard size (as set by the container).

The next icon replaces fa-circle with fa-rss-square, which shows the RSS icon. fa-stack-1x makes it the standard size, so half as big as the solid circle.

And finally the last icon is from a different ‘set’ of Font Awesome icons, so starts with fa-regular (instead of fa) and then fa-circle. I know this is a little confusing, but “fa fa-circle” is a solid circle, while “fa-regular fa-circle” is a hollow circle. These values all come from looking them up on the Font Awesome site. Finally fa-stack-2x makes the hollow circle twice the standard size, or the same size as the solid circle.

The icon-background, rss-icon and icon-border classes are my classes that I use in local css to set colors and so forth.

If you’re curious about the actual shapes, here’s the CSS for fa-rss-square, or more technically the before pseudo element for fa-rss-square

.fa-rss-square:before, .fa-square-rss:before {
content: "\f143";
}

So just the hex code of the character that Font Awesome uses for the RSS icon, I guess.

And that’s about as far as I’ve taken this. I’m not 100% convinced this is easier than just making some small gifs to use as icons, but I’ll admit it’s pretty convenient once you have Font Awesome installed on a site. Just look up the icon you want and paste in the classes and bam!