How to use Font Awesome icons as backgrounds in WordPress

I was recently creating a landing page for my Mailchimp classes and wanted to use an icon font as a background image in place of a JPG, PNG or other image. Image files slow down webpage load speed so it makes sense to use a lightweight icon font instead of a background image where possible.

My websites run on WordPress and I use StudioPress (Genesis) themes. I wanted to achieve an effect like the example below.

How to create blocks with icon font backgrounds

For those that are interested in the HTML and CSS used then skip right to the bottom. For those that would like an explanation then read on.

Creating columns in StudioPress

Fortunately Genesis themes have simple to use column classes. To create the columns as below, the HTML below the columns was added:

<div class="one-half first ex1">Example<br />One</div>
<div class="one-half ex2">Example<br />Two</div>

I added a unique class (ex1 and ex2) to each of the columns so that I may easily add unique styling properties to each column (which is described below).

Styling the columns

To style the columns I then added the following CSS.

.one-half {
color:#fff;
font-size:115%;
font-weight:500;
height:100px;
text-align:center;
}

.ex1 { background-color: #ec407a; }
.ex2 { background-color: #d81b60; }

which results in the following:

Instructions to add Font Awesome icons as the background

We’ve added content to the columns and styled the columns. We now need to add the icons we want, with styling, as the background for each of the columns. here are the steps:

1. Make a note of the unicode for each of the Font Awesome icons you want to use. For example, the unicode for the fa-mouse-pointer is f245
2. Add the following CSS (amend the unicode as you require)

   .ex1:before { content: "\f2b7"; }
   .ex2:before { content: "\f245"; }

3. Add

   position: relative;

   to the

   .one-half

   css

4. Style the background icons as follows:

   .ex1:before,.ex2:before {
   position: absolute;
   font-family: 'FontAwesome';
   font-size:70px;
   top: 0;
   left: 10px;
   color:#fff;
   opacity:.2;
   }

Your columns should now look like this:

The HTML and CSS to use icon fonts as background images

Here is the full HTML and CSS used in this example:
HTML

<div class="one-half first ex1">Example<br />One</div>
<div class="one-half ex2">Example<br />Two</div>
<div style="clear: both;"></div>

CSS

.one-half {
position: relative; 
color:#fff;
font-size:115%;
font-weight:500;
height:100px;
text-align:center;
}

.ex1 { background-color: #ec407a; }
.ex2 { background-color: #d81b60; }

.ex1:before,.ex2:before {
position: absolute;
font-family: 'FontAwesome';
font-size:70px;
top: 0;
left: 10px;
color:#fff;
opacity:.2;
}

.ex1:before { content: "\f2b7"; }
.ex2:before { content: "\f245"; }