Stacking Font Awesome Icons in WordPress

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 is a great starting point, but if you try to use it as is on a WordPress post it probably won’t work.

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:

<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>

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, like this:

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 thee new <br/> code at the end of the lines, which is what’s causing the problem.

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

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>

Which renders like this:

Changing Colors

And if you wan 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>

Which renders like this:

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>

Which renders like this: