More Font Awesome and WordPress: Stacking

This entry is part 2 of 4 in the series Adding Font Awesome to Your WordPress Site

One of the reasons Font Awesome is so popular is because it is so easy to create custom-looking icons.  In today’s post we are going to stack two icons to create a whole new one like this:

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
 
This is a little tricky because of the way WordPress tries to reformat HTML. Remember that we are working in the Text editor – it is probably a good idea to write up your post or page first and then go back and add your icons.

Make sure you are in Text mode, not Visual

Make sure you are in Text mode, not Visual

In this tutorial we are going to add the “no cameras” icon to the following sentence:

Authorities do not allow photography at this location.

Because we are stacking two icons, we are going to put those icons inside a span so that the CSS processor knows they go together:

<span class="fa-stack fa-lg"> </span> Authorities do not allow photography at this location.

“fa-stack” is the css that handles the stacking and fa-lg is css to use a larger version of the font.

Now we are going to add the html for the camera icon:

<span class="fa-stack fa-lg"><i class="fa fa-camera fa-stack-1x"></i></span> Authorities do not allow photography at this location.

Here is where we start getting tricky. Make sure that the and everything inside it are all on one line. If you break it into separate lines WordPress will add line breaks and your icons will show up separately instead of stacked.

The classes we are using for the camera are:

  • fa – the generic font awesome setup css
  • fa-camera – the css code for the camera icon
  • fa-stack-1x – css for the size of the icon. We want it slightly smaller than the overlaying icon.

Finally, we add the “no” icon:

<span class="fa-stack fa-lg"><i class="fa fa-camera fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x danger"></i></span> Authorities do not allow photography at this location.

The classes are almost the same:

  • fa – the generic font awesome setup css
  • fa-camera – the css code for the ‘no’ icon
  • fa-stack-2x – css for the size of the icon. We want it slightly larger than the underlaying icon.
  • danger – this is a class I added to my own stylesheet:
.danger {color: #FF0000;}

The result is:

Authorities do not allow photography at this location.

Tomorrow we’ll take a look at rotating and animating icons.

Series Navigation<< Fun with Font Awesome – Adding Icons to Your WordPress SiteFont Awesome and WordPress, Rotating and Animating Icons >>
Follow me

Submit a Comment