Use Font Awesome 5 Icons in Oracle ADF Application

Font Awesome is a standard icon package that has a collection of lots of beautiful customizable icons. In this post, I'll describe how to use Font Awesome 5 Icons in the Oracle ADF Application.

You can check these posts to use Font Awesome's older version 4 in ADF

Font Awesome with ADF

Leveraging Icon Fonts (Font Awesome) in Oracle ADF - 500 New Icons for your app

I suggest you try the latest version 5 as the new version is written from scratch and has many new icons pack support.

Let's start the process to use Font Awesome 5 Icons in Oracle ADF

• Create an ADF Application and a page under view controller project

• Now add Font Awesome CSS file reference in the page using resource tag like this

1. <af:resource type="css" source="https://use.fontawesome.com/releases/v5.5.0/css/all.css"/>

• Drop af:icon on the page and search for the desired icon here, click on the icon and copy icon class name and put in style class property of af:icon. See in the below image icon class name is highlighted
  
  and it is used in ADF page like this (here I have added 4 icons for example)
  
  
  
  
  

and it is used in ADF page like this (here I have added 4 icons for example)

1. <af:form id="f1">
2. <af:spacer width="10" height="70" id="s1"/>
3. <af:icon name="fab fa-apple" id="i1" styleClass="fab fa-apple"/>
4. <af:spacer width="10" height="10" id="s2"/>
5. <af:icon name="fab fa-android" id="i2" styleClass="fab fa-android"/>
6. <af:spacer width="10" height="10" id="s3"/>
7. <af:icon name="fab fa-codepen" id="i3" styleClass="fab fa-codepen"/>
8. <af:spacer width="10" height="10" id="s4"/>
9. <af:icon name="fas fa-car-side" id="i4" styleClass="fas fa-car"/>
10. </af:form>

• Now run and check the application, In the below image, you can see that icons are smaller in size
  
  
  
  
  
• To increase icon size append fa-5x in style class of icon, Here you can change 5x to any value like 1x,2x etc.
  
  
  
  
  
• And to change color of the icon just put CSS in the inline style property of af:icon like this

1. <af:form id="f1">
2. <af:spacer width="10" height="150" id="s1"/>
3. <af:icon name="fab fa-apple" id="i1" styleClass="fab fa-apple fa-10x"/>
4. <af:spacer width="10" height="10" id="s2"/>
5. <af:icon name="fab fa-android" id="i2" styleClass="fab fa-android fa-10x" inlineStyle="color:green;"/>
6. <af:spacer width="10" height="10" id="s3"/>
7. <af:icon name="fab fa-codepen" id="i3" styleClass="fab fa-codepen fa-10x" inlineStyle="color:Tomato;"/>
8. <af:spacer width="10" height="10" id="s4"/>
9. <af:icon name="fas fa-car-side" id="i4" styleClass="fas fa-car fa-10x" inlineStyle="color: Dodgerblue;"/>
10. </af:form>

and icons look like this now

All done :) You can see that Font Awesome icons look much better than png images and reduce the page load time.

Sample ADF Application - Download

Cheers  Happy Learning