Stacking Font Awesome Icons in Wordpress

Stacking Font Awesome icons does work in Wordpress, but it needs a simple tweak to work around one of Wordpress’s editing quirks.

Last Updated:

This post may include affiliate links. Read more.

One of the nifty things about the Font Awesome icons is that they have the built-in capability to be stacked on top of each other. So you can make your own compound icons.

The examples provided on the Font Awesome website are great starting points, but if you try to use it as-is on a WordPress post it probably won’t work.

This was written for WordPress’s pre-Gutenberg editing and I have not tested it with WordPress 5.8 or above. I’m leaving it here in case it’s helpful to someone, but I can’t guarantee it still works without some further tweaks.

Use Wordpress’s HTML editor for this. It won’t work in the Visual Editor.

Given that I have a photography website, the “no photo” sign example they provide is especially useful, and that’s the one I’m going to use here. Here’s the code provided on the example page to generate that:

If you copy and paste it like that, you’ll likely run into the formatting that WordPress automatically applies, and the icons will each be on a new line.

The problem is that when you go to preview the page, WordPress is adding line breaks to try to preserve the line breaks you’ve used in the editor. If you take a look at the HTML that it’s kicking out, you’ll see the new <br/> code at the end of the lines, which is what’s causing the problem.

The solution is very simple: don’t use new lines in the WordPress editor. Use this instead:

<span class="fa-stack fa-lg"><i class="fa fa-camera fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x text-danger"></i></span>

Changing Colors

And if you want to change the color of an individual icon, you can either style it in your CSS, which is ideal if your style is going to be consistent across the site, or, if you just want to do it on a one-off basis, you can do add the color style, like this:

<span class="fa-stack fa-lg"><i class="fa fa-camera fa-stack-1x" style="color: #663300;"></i><i class="fa fa-ban fa-stack-2x text-danger" style="color: red;"></i></span>

Making it Bigger

When changing the size of a font stack, you add the sizing to the parent, not to the individual icons. Like this:

<span class="fa-stack fa-5x"><i class="fa fa-camera fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x text-danger" style="color: red"></i></span>
David Coleman / Photographer
by David Coleman

I'm a professional freelance travel photographer based in Washington DC. Seven continents, up mountains, underwater, and a bunch of places in between. My images have appeared in numerous publications, and you can check out some of my travel photography here. More »

3 thoughts on “Stacking Font Awesome Icons in Wordpress”

  1. Hey, thanks for the post. There is a typo in your last example.
    The first closing bracket of fa-danger is missing:
    style=”color: red”

    Reply

Leave a Comment