My websites run on WordPress and I use StudioPress (Genesis) themes. I wanted to achieve an effect like the example below.
One
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:
One
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:
One
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:
- 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
- Add the following CSS (amend the unicode as you require)
.ex1:before { content: "\f2b7"; } .ex2:before { content: "\f245"; }
- Add
position: relative;
to the
.one-half
css
- 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:
One
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"; }
Leave a ReplyCancel reply