Please disable your adblock and script blockers to view this page

Search this blog

Showing posts with label Font Awesome. Show all posts
Showing posts with label Font Awesome. Show all posts

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