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:
If you're looking to create banners, thumbnails, or other graphics for your social media accounts, a good option worth looking at is Canva. It runs in a web browser, which means nothing to install on a computer, and you can even use a mobile device. So you can do it from anywhere, and it's very straightforward to use. There's a very capable free plan, and you can get many more useful features, photos, and fonts with the Pro plan. The Pro plan has a 30-day free trial, which you can get here.
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 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:
Timo says
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”
David says
Thanks–fixed.
Tim Howard says
Thanks so much! I was tearing my limited amount of hair out…