• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

OrganicWeb

Mailchimp Training & Consulting

  • Home
  • Services
    • Mailchimp Training
    • Mailchimp Consulting
  • Free Tools
    • Mailchimp Tutorials on YouTube
    • Subject Line Generator
    • Marketing Ideas Generator
    • Map Maker for Email
    • WhatsApp Click to Chat Generator
    • Avoid Email Going to Spam
    • Email Link Generator
    • Is Mailchimp Down?
    • Marketing Facts and Stats
  • Content
    • Blog
    • Videos
  • Contact & About
    • Contact
    • About

How to use Font Awesome icons as backgrounds in WordPress

WordPress LogoI 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.

Example
One
Example
Two

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:

Example
One
Example
Two
<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:

Example
One
Example
Two

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:

Example
One
Example
Two

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"; }

Found this useful? Please share:

Related

  • Duplicate Jetpack sharing icons
  • How to get Mailchimp Subscriber Popup working in WordPress
  • WordPress – How to add Social Media icons into a menu

Filed Under: WordPress

Watch Gary in action

Gary frequently adds Mailchimp instructional videos to his YouTube channel. Subscribe to keep updated.

→  Subscribe   ←

How to add an editable attachment to a Mailchimp campaign.

How to add, and send, coupon codes in Mailchimp.

Reader Interactions

Leave a Reply Cancel reply

You are here: Home / WordPress / How to use Font Awesome icons as backgrounds in WordPress

Primary Sidebar

Mailchimp write about my work

Read on Mailchimp.com

Learn from a Mailchimp Pro Partner

Signup to receive info about Gary's Mailchimp beginner and advanced classes.

Sign up

Gary on Australian National Radio

Changes are coming to the Australian Spam Act

Read Gary's article in SmartCompany

Meet Gary, Mailchimp Expert

Gary is a Mailchimp Expert and Partner. He delivers Mailchimp training and consulting services in Australia, New Zealand and Singapore. Gary presents at Mailchimp events and hosts the first, and only, Australian Mailchimp sponsored event. He is M.B.A. qualified from Henley Business School, U.K.

Contact Gary for your Mailchimp needs

Footer

Customer Rating

Mailchimp Pro Partners

Contact

Contact Gary for all your Mailchimp training, consulting and integration needs.

Contact Gary.

Copyright © 2022 · Sitemap · ABN: 40800872179 · Privacy Policy · Terms of Service