How to use Font Awesome icons with Genesis in WordPress

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

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).

Basic Icons

Try this in the text editor on a WordPress post

Results in this:  fa-camera-retro

Larger Icons

Try this in the text editor on a WordPress post

Results:

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x


 

Fixed width Icons

Try this in the text editor on a WordPress post

Results:


 

List Icons

Try this in the text editor on a WordPress post

Results:

  • List icons
  • can be used
  • as bullets
  • in lists

 

Bordered & Pulled Icons

Try this in the text editor on a WordPress post

Results:


…tomorrow we will run faster, stretch out our arms farther…
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.


 

Animated Icons

Try this in the text editor on a WordPress post

Results:





 


More Examples here: http://fortawesome.github.io/Font-Awesome/examples/

 

What do you think of Font Awesome and do you use it in your projects? Let us know it the comments!