How to use Font Awesome icons with Genesis in WordPress

Using Font Awesome icons with Genesis in WordPress is a great way to call attention to items and use icons that are scalable and great looking on any screen size.

What is Font Awesome?

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Press Avenue ‘s you! You Press Avenue!

Nailed it! (animated with “fa-spin” in the class)

I see stars (added size to it by adding “fa-5x” to the class)

What is Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Its search engine optimized, supports Responsive HTML5 Designs, airtight security, Customizable and Fast, and it has unlimited updates and support. You can purchase the Genesis Framework here (aff).

Step 1 – Adding Font Awesome

Add Font Awesome to Genesis via the functions.php file

https://gist.github.com/JohnBunka/9b4cff81bf964f3b869f

Step 2 – Using Font Awesome icons with Genesis in WordPress

After you get up and running, you can place Font Awesome icons just about anywhere with the <i> tag. Some examples appreciatively re-used from the Bootstrap documentation.

Font Awesome in Genesis Examples:

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon’s name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).