Have Camera Will Travel - Reviews & Tips HomepageHave Camera Will Travel - Reviews & Tips

David Coleman Photography

  • Reviews & Tips
  • GoPro
  • Lightroom
  • Places
  • Photos
  • Reviews
    • Nikon
    • Sony
    • Fujifilm
    • Cameras
    • Lenses
    • Sample Images
    • Travel Tripods
    • Adventure Cameras
    • 360°
  • Memory Cards
  • GoPro
  • Flash
  • Travel Tripods
  • Books
  • Social Media
    • Facebook
    • Instagram
    • YouTube
    • Twitter

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.

no-photos-sign

Categories: Wordpress for Photographers
Tags: Wordpress tricks
Last updated about 2 years ago // Originally published about 5 years ago

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.

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:

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

By David Coleman
Instagram: @havecamerawilltraveldc

Last updated on March 27, 2019

Categories: Wordpress for Photographers
Tags: Wordpress tricks

I may earn a commission for purchases using links on this page. Learn more.

News & Deals

With the holidays fast approaching, there’s some great deals on photography gear and services available. I’ve put together a roundup of Black Friday and Cyber Monday 2020 Photography Deals. It’s a running list as new deals are announced, so be sure to check back.

Canon announces new EOS Rebel T8i DSLR. Canon has announced their new T8i DSLR. 24MP APS-C cropped CMOS sensor, 4K24 video, and updated image processing and detection systems. It’s available for preorder from B&H Photo.

New Firmware for the Ricoh GR III. Ricoh has release firmware v1.31 for the GR III. Release notes are: “Corrected — When shooting with the multiple exposure, in rare cases the live view may not display correctly. Improved stability for general performance.” You can download it here.

New Canon 1D X Mark III Pro DSLR Announced. Canon has announced their new flagship model of pro DSLR, the 1D X Mark III. They’re sticking with a 20.1MP CMOS sensor, but it’s a new and improved version and boasts an incredible native ISO range of ISO 100 to ISO 102400 and an extended range that goes up to a jaw-dropping ISO 819200. With revamped autofocus, a new image processor, and all sorts of other bells and whistles, it’s no wonder that Canon is billing it as “The Ultimate EOS.”

New Manfrotto Pro Rugged Memory Cards. Manfrotto, an Italian probably best known for their tripods and studio accessories, has launched a new Pro Rugged range of high-end SD, microSD, and CompactFlash cards. While they don’t have a huge selection of sizes and speeds, the cards are aiming for very fast cards that can put up with rugged demands. For instance, they claim that their V90 rated SD cards can withstand three times the force (20kg / 45 lbs) of a regular SD card. I’ve ordered some to run through my speed tests.

New Sony Alpha a7 firmware released. A firmware update for the Sony a7R IV now lets you control external Sony flashes from the camera’s own menu system. Up to 15 flashes in five groups can be controlled via the camera. It also applies to the a7R III and a7 III.

Kinsta Wordpress Managed Hosting

Comments

  1. Timo says

    March 27, 2019 at 11:42 am

    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
    • David says

      March 27, 2019 at 2:17 pm

      Thanks–fixed.

      Reply
  2. Tim Howard says

    November 24, 2018 at 2:42 pm

    Thanks so much! I was tearing my limited amount of hair out…

    Reply

Questions & Comments Cancel reply

You have to agree to the comment policy.

About Me

I take photos. I travel. I do it for a living. Seven continents. Dozens of countries. Up mountains. Under water. And a bunch of places in between.

Get in Touch

Newsletter

© 2009–2021 David Coleman · Have Camera Will Travel LLC · all rights reserved


Photos by David Coleman. Please contact me for licensing images.
All images are registered with the U.S. Copyright Office.


Privacy & Disclosure · Cookie Declaration · Disclaimer · Terms of Service · Copyright · Contact


XML Sitemap