How to use Font Awesome icons with Genesis in WordPress

Share: 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

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

Basic Icons

Try this in the text editor on a WordPress post

https://gist.github.com/JohnBunka/1e457e9257de9a5e0bf9

Results in this:  fa-camera-retro

Larger Icons

Try this in the text editor on a WordPress post

https://gist.github.com/JohnBunka/067bc6e669ebd071dc29

Results:

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


 

Fixed width Icons

Try this in the text editor on a WordPress post

https://gist.github.com/JohnBunka/aacf5b6359fc6eec5906

Results:


 

List Icons

Try this in the text editor on a WordPress post

https://gist.github.com/JohnBunka/c090c1158f74fbb07ab4

Results:

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

 

Bordered & Pulled Icons

Try this in the text editor on a WordPress post

https://gist.github.com/JohnBunka/dc67aa193b09fc7f5edc

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

https://gist.github.com/JohnBunka/74d1ad451c09245e59eb

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!

Share & Help Out the Community

[Sassy_Social_Share]

Posted in , Tags:

Let us know what you think of the How to use Font Awesome icons with Genesis in WordPress WordPress Tutorial. Feel free to ask a question or give your two-cents. Additionally, you can continue the discussion on our Free Facebook Group: "WordPress Tutorials & Community Help"

Leave a Comment