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

Use Google Fonts in ADF Application using custom CSS

We can use google fonts in the ADF application very easily. In this post, I'll describe the steps to implement this using custom CSS.

Go to Google Fonts

Select any font that you want to use and click on the plus (+) icon, I have clicked that that's why the image is showing the minus(-) icon

The next step is to see the font's properties and copy the highlighted link, It'll be used in our CSS

Now create a page in the ADF application and add this CSS using the ADF Resource tag, Here I have added 4 different fonts

1. <af:resource type="css" source="https://fonts.googleapis.com/css?family=Charmonman"/>
2. <af:resource type="css" source="https://fonts.googleapis.com/css?family=Kirang+Haerang"/>
3. <af:resource type="css" source="https://fonts.googleapis.com/css?family=VT323"/>
4. <af:resource type="css" source="https://fonts.googleapis.com/css?family=Philosopher"/>

Added four output text to show different fonts

1. <af:outputText value="Oracle Application Development Framework" id="ot1"
2. inlineStyle="font-family:Charmonman;font-size:35px;color:red;font-weight:bold;"/>
3. <af:spacer width="10" height="10" id="s1"/>
4. <af:outputText value="Oracle Application Development Framework" id="ot2"
5. inlineStyle="font-family:Kirang Haerang;font-size:35px;color:green;font-weight:bold;"/>
6. <af:spacer width="10" height="10" id="s2"/>
7. <af:outputText value="Oracle Application Development Framework" id="ot3"
8. inlineStyle="font-family:VT323; font-size:35px; color:#4289aa; font-weight:bold;"/>
9. <af:spacer width="10" height="10" id="s3"/>
10. <af:outputText value="Oracle Application Development Framework" id="ot4"
11. inlineStyle="font-family:Philosopher; font-size:35px; color:#dc006d; font-weight:bold;"/>

Now run the application and check :)

Sample ADF Application - Download

Cheers  Happy Learning