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