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>
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”
Thanks–fixed.
Thanks so much! I was tearing my limited amount of hair out…