Create CSS Icons Using Pseudo-Classes and the Content Property

Displaying icons consistently across your website can be a mind-numbing task.

Using <img> tags is a terrible way to do it, and creating complex CSS with background images is a pain.

Enter the :before pseudo-class. The :before pseudo-class combined with the content property is great for displaying icons like this:

PDF Download
MP3 Download

Or like this:

Title With Icon

A Smaller Title With Icon

Pseudo-classes have been around since CSS1 way back in 1996. The great part about the :before class is that it is supported in all major browsers, IE included! (Just make sure you declare a !DOCTYPE or it won’t work in IE8.)

Getting Started

Step One

Get some icons and upload a few to your images folder. Between 22px and 32px square should work best, depending on your application.

Step Two

Create your html:

<a class="icon pdficon">PDF Download</a>

Using two different classes allows you to write less CSS if you are reusing this across your site.

Step Three

Add your CSS. We’ll apply the global styles using the .icon class, and display the image using the a.pdficon:before class.

You’ll notice the blue box included in the .icon code, you can ignore this if you want. The important part is in the a.pdficon:before styles.

.icon {
display: block;
padding: 5px 8px;
background: #e6effa;
border: 1px solid #bdd0e8;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

.icon:hover {
background: #f4f8fd;

a.pdficon:before {
content: url(images/pdf-22.png);
display: block;
float: left;
margin-right: 5px;
position: relative;
bottom: 2px;

That’s it! Just change the a.pdficon:before class to something else to display a different image. For example, the code for the MP3 download above is:

a.mp3icon:before {
content: url(images/itunes.png);
display: block;
float: left;
margin-right: 5px;
position: relative;
bottom: 2px;

Notice the relative positioning – this is not always necessary, it just depends on how your icon is lining up.

Titles with Icons

The titles are the same concept, just slightly different code. Here’s the HTML from the larger title above:

<h2 class="widgeticon">Title With Icon</h2>

Here’s the CSS:

h2.widgeticon:before {
content: url(images/help-32.png);
display: block;
float: left;
margin-right: 5px;

Now go get cracking!


FitPro 2.1 Released!

A new version of FitPro is now available that has some bug fixes, new features, and is fully compatible with WordPress 3.2.1. To download the latest version simply login to your Press Coders control panel and download the zip file from there.

To help you upgrade with the minimum of fuss you can also find an upgrade document (pdf) in the FitPro forum, at the top as a sticky thread.

Some of the new features include:

  • A ‘Reset Options’ button so you can revert your theme options to the defaults at any time.
  • A custom styles text box where you can enter your CSS commands directly, to have fine grained control over your site.
  • Info box widget now has an optional search field too.
  • The Sidebar Commander feature has moved from theme options to the Appearance->Widgets page.

If you are new to FitPro and haven’t tried it out yet, why not take the live demo for a spin and see what you think of it? Click the image above to go directly to the live demo where you can see try out all the great features of FitPro first hand.

Alternatively, you can find out why we think FitPro is such a great theme so click here to see all the juicy details!