Please disable your adblock and script blockers to view this page

Search this blog

Monday, 19 November 2018

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

No comments :

Post a Comment