pixel

Today I am going to show you how to take the regular icon display to the next level and add some animation to your Font Awesome icons.  This process can be done with any WordPress website, but I am going to use the Divi theme as my example.

When icons first came on the web design scene is was hard to know if they were a design fad, or here to stay.  There are so many positives to using icons in design that I think it’s safe to say they are here for a while.

Pros of using icons in your WordPress website designs:

  • People generally skim content, images are eye catching and easy to read.
  • Breaks up pages with a lot of text.
  • Icons are a good way to incorporate color into your site.
  • Icons express content very easily on mobile devices.

We all know, searching for a great icon set can be time consuming and at times frustrating.  Sources I use for icons:

  • IconFinder that is an affiliate link, and if you use it you get a 50% bonus when signing up. There are LOADS of free options here.
  • CreativeMarket
  • Divi Icon King gives you access to almost 2000 Font Awesome and Material Icons directly in the Divi Builder
  • Divi Font Awesome – You may have seen the Elegant Themes Review of the plugin, which is very helpful with examples and how to’s.

Since we are all always on the hunt for creative ways to enhance our web designs, I thought I would share with you how to add animated font awesome icons to your designs.

In this example we are going to use the Divi Theme.  The process is slightly different for other WordPress themes.

First, we need to install this bit of code to the header.php file of your website:


<script src="https://use.fontawesome.com/releases/v5.0.6/js/brands.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.6/js/solid.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.6/js/fontawesome.js"></script>

More on this process can be found here in the Font Awesome website.

Does header.php scare you? No worries, it could not be easier. Copy the above, and paste it in your Divi Theme Options -> Integration ->area. Image below. (NOTE: when you copy / paste ” sometimes they are pasted as curly, and not straight, if you have trouble with the code, retype the ” in the code within your text editor or the Theme Options).

how to add animated font awesome icons to your divi theme website

 

 

Now for some fun, take a look at the spinning icons options.

39 Font Awesome Spinning Icons

To use any of these spinning icons you will need to make sure you are in TEXT mode (simply toggle from Visual into Text) and paste the code in line with where the icon should appear.

<i class=”fas fa-circle-notch fa-spin”></i>

You will need <i class=”fas

Then the next segment will change based on the icon you want to use (cog, circle, life-ring, snowflake, etc)

Then you will have the motion command (fa-spin or fa-pulse).

If you want to change the color add this command next

style=color:#dddddd;”

<i class=”fas fa-snowflake fa-spin” style=color:#dddddd;></i>

If you would like to increase the size of the icon add a div command, this example increases the size 3x

<div class=”fa-3x”>

Remember to close your <div> with a </div>

Here are some samples, you can cut and paste them to test.

<div class=”fa-3x”><i class=”fas fa-spinner fa-spin”></i></div>
<i class=”fas fa-circle-notch fa-spin”></i>
<i class=”fas fa-sync fa-spin”></i>
<i class=”fas fa-cog fa-spin”></i>
<i class=”fas fa-spinner fa-pulse”></i>
<div class=”fa-3x”><i class=”fas fa-snowflake fa-pulse”></i></div>

Let’s see your creations!  Put links to where you have used font awesome, or even better spinny icons in your projects in the Comments.

 

 

 

 





 

 

EIleen Lonergan
Eileen Lonergan was an integral part of this company. Unfortunately, Eileen Passed away on the 31st of October 2018 after a short battle with Cancer. She leaves behind the legacy of the Divi Theme Users Group and hundreds of people that she helped through coaching, building outstanding websites and just being - accessible. We miss her every day!
Click to access the login or register cheese

Subscribe To Our Newsletter to get the latest news and product updates

You have Successfully Subscribed!

Pin It on Pinterest

Share This