How to add Font Awesome icons before Archive Headlines in Genesis

David asks,

I (usually) never term the approach and code in any of my articles as the ‘best’ as I believe it is all relative and there are many ways to skin a cat. Nevertheless, below is what I believe the easiest method for adding icon fonts before archive titles in Genesis.

Screen Shot 2014-08-01 at 9.42.56 AM

Step 1

Edit the category for which you wish to use the headlines and enter your desired title.

edit-category-wordpress

See my article titled Category Archive Headline and Intro Text in Genesis for more info.

Step 2

In child theme’s functions.php, add

1 2 3 4 5 6 7 8 9 10
<?php
//* Do NOT include the opening php tag
 
//* Make Font Awesome available
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
 
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' );
 
}
view raw functions.php hosted with ❤ by GitHub

Step 3

Add the following in child theme’s style.css:

1 2 3 4 5
.category-drink .archive-description .archive-title:before {
content: "\f000";
font-family: FontAwesome;
padding-right: 10px;
}
view raw style.css hosted with ❤ by GitHub

In the above, replace ‘drink’ with your category’s slug.

One way to get this is to observe the body element’s CSS classes for that particular category’s archive page. Ex.: At http://genesis.dev/category/drink/

2014-08-01_10-11-48

Also in the CSS code, replace f000 with the unicode of your desired font icon. This can be obtained on the page that comes up after clicking on the icon of your choice at http://fontawesome.io/icons/.

2014-08-01_10-15-30

That’s it.

Moving to Australia

We are moving to Australia on 8th of June and have a lot of things to take care of before the move. There will not be any updates in this site until we get settled in Melbourne. I know there are a lot of comments unanswered and I wish I have the time … [Continue reading]