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.
Boost Your Social Media Presence with New Skills
Looking to boost your social media presence? Most of us are working from home now, which makes it a great opportunity to take some online classes. CreativeLive has a bunch of classes available that can help you make the most of your social media accounts, whether you're looking to brush up, monetize, optimize, or try something new.
You can sign up for individual classes, or they're currently offering 50% off their all-access Creator Pass that gives you access to all of their classes across all sorts of creative and business fields for a year.
Some example classes worth a look:
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 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…