How to use Font Awesome Animation Library in Applications

Since Oracle Apex (Apex ) already incorporates the amazing font awesome icons library . Its time to add some dazzle to those static icons. Font awesome already has a few animation parlor tricks up it's sleeves. However, I found that adding some of these extra animations wouldn't hurt.

So lets dive in

• Get the Font Awesome Animation Library from download .
• Upload the minified CSS under the Shared Components =>  Static Application Files
  Check out How to upload section in the How to add CSS Files to Applications.
• Once uploaded, copy and remember the the Reference e.g.
  #APP_IMAGES#css/font-awesome-animation.min.css
• Add Font Awesome Animation Library to the Application at the User Interface Level so that Its available through out the Application.
  Check out the User Interface Level section in How to add CSS Files to Applications.

Using Font Awesome Animation

Now, adding animation to the font awesome icon is a matter of adding the relevant CSS classes.
Here are a few concepts:

• To start animation on document load use "animated" class
• To start animation on hover use "animated-hover" class
• To start animation on hover over the parent element use  "faa-parent animated-hover" classes
• For animation speed , not specifying any speed class would render as standard, or use "fa-slow" or "fa-fast".

Here are the animation classes which you get from the website:

• faa-wrench
• faa-ring
• faa-horizontal
• faa-vertical
• faa-flash
• faa-bounce
• faa-spin
• faa-float
• faa-pulse
• faa-shake
• faa-tada
• faa-passing
• faa-passing-reverse
• faa-burst

An example would be to use the following classes

faa-tada faa-parent animated-hover fa-slow

Font Awesome Animation can be applied to any component on the page, whether the component is using font awesome icon or not.

Checkout this

Demo Animated Application

Applying Font Awesome Animation to a Button

Create 3 Buttons in a region  as following:

APEX Font Awesome Animation

Icon Only Animation

Vista Theme
If you want to animate the icon only  and not the parent i.e button element ,you can enter the font awesome icon class as well as the animation classes in the Button Attributes => Icon CSS Classes attribute as shown in the image above. e.g fa-bell faa-wrench animated-hover fa-slow

    OR you can assign static id to each button,  I have assigned gear id to a button,  and then Go to Page Attributes => Execute when Page Loads and add the following.

apex.jQuery('#gear span').addClass('faa-spin animated fa-slow');

Vita Theme Issue
In Vita Theme, the Hover effect does not work. So I have devised a solution using jQuery
As an example the button has the following attributes:
id:bell
Icon CSS Classes:fa-bell faa-wrench fa-slow

Page Attributes => Execute when Page Loads and add the following.

$('#bell')

.on('mouseover', function () {

$(this).find('span:first').addClass('animated');

})

.on('mouseout', function () {

$(this).find('span:first').removeClass('animated');

})

Font Awesome Button Animation

Applying Font Awesome Animation to Side Navigation Bar

I am using the standard side bar navigation template. Since Standard templates do not allowing editing that’s why you have to copy and edit the new template.
Go to Shared Components =>User Interface Section=> Templates => Copy Side Navigation Menu to Side Navigation Menu New => Edit Side Navigation Menu New template => Side Navigation Menu New => Execute when Page Loads
and add the following:

$('#t_TreeNav .a-TreeView-node').addClass('faa-pulse faa-parent animated-hover fa-slow');

Make it your default template.
Go to Shared Components => User Interface => User Interface Attributes => Edit User Interface => Navigation Menu => List Template => Side Navigation Menu New

Font Awesome Side Menu Navigation Animation

I have to say that imagination is your limit and practice your tool. So e.g if you wanted to use different animation for each navigation item

You may

• Create a New Side Bar Navigation Template and use the A01...A10 substitutions in the relavent places to be later replaced by animation classes from the list query. 

OR

•  Use javascript e.g set a class  lets say anim-item  along with animation classes for all items in the list definition :

       
Shortened Code snippet

  select null as lvl 'Date Picker Types' as label,
      'fa-calendar anim-item ==faa-pulse animated-hover fa-slow==' as icon,
Union All
select null as lvl,
       'Another Page' as label,
       'fa-cog anim-item ==faa-spin animated-hover fa-slow==' as icon,

• then in Side Navigation Menu New  Template => Execute when Page Loads 

   use jquery selector $('anim-item') and foreach , extract the class string and remove the  ==faa-spin animated-hover fa-slow==  from class of that item and then traverse through parents till you reach the Side bar Navigation Item and addClass  faa-spin animated-hover fa-slow to it , so each  Item will have it's own animation.

Side Navigation Bar Icons Only Animation

If you want to animate the Icons only then keep the standard Side Navigation Template , However use a List based on the following query :

select null as lvl,
       'Date Picker Types' as label,
       'f?p=' || :APP_ID || ':10:' || :APP_SESSION as target,
        10 as c,
       'fa-calendar faa-pulse animated-hover fa-slow' as icon,
        null as ia,
       null as iaa,
       null as attribute1,
       null as attribute2,
        null as attribute3,
       'title' as attribute4     
from dual
Union All
select null as lvl,
       'Another Page' as label,
       'f?p=' || :APP_ID || ':11:' || :APP_SESSION as target,
        11 as c,
       'fa-cog faa-spin animated-hover fa-slow' as icon,
        null as ia,
       null as iaa,
       null as attribute1,
       null as attribute2,
        null as attribute3,
       'title' as attribute4   
from dual
Union All
select null as lvl,
       'Yet Another Page' as label,
       'f?p=' || :APP_ID || ':12:' || :APP_SESSION as target,
        12 as c,
       'fa-bell faa-wrench animated-hover fa-slow' as icon,
        null as ia,
       null as iaa,
       null as attribute1,
       null as attribute2,
        null as attribute3,
       'title' as attribute4   
from dual
Union All
select null as lvl,
       'Almost there' as label,
       'f?p=' || :APP_ID || ':13:' || :APP_SESSION as target,
        13 as c,
       'fa-bicycle faa-passing animated-hover fa-slow' as icon,
        null as ia,
       null as iaa,
       null as attribute1,
       null as attribute2,
        null as attribute3,
       'title' as attribute4   
from dual
Union All
select null as lvl,
       'Not So Far' as label,
       'f?p=' || :APP_ID || ':14:' || :APP_SESSION as target,
        14 as c,
       'fa-fighter-jet faa-horizontal animated-hover fa-slow' as icon,
        null as ia,
       null as iaa,
       null as attribute1,
       null as attribute2,
        null as attribute3,
       'title' as attribute4   
from dual