Use Font Awesome 5 Icons in Oracle ADF Application

Sharing is Caring

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 Oracle ADF Application.

You can check these post 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 projectADF ViewController
  • Now add Font Awesome CSS file reference in the page using resource tag like this
    <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)
    <af:form id="f1">
        <af:spacer width="10" height="70" id="s1"/>
        <af:icon name="fab fa-apple" id="i1" styleClass="fab fa-apple"/>
        <af:spacer width="10" height="10" id="s2"/>
        <af:icon name="fab fa-android" id="i2" styleClass="fab fa-android"/>
        <af:spacer width="10" height="10" id="s3"/>
        <af:icon name="fab fa-codepen" id="i3" styleClass="fab fa-codepen"/>
        <af:spacer width="10" height="10" id="s4"/>
        <af:icon name="fas fa-car-side" id="i4" styleClass="fas fa-car"/>
    </af:form>
  • Now run and check application, In below image, you can see that icons are smaller in sizeFont Awesome Small Icons
  • To increase icon size append fa-5x in style class of icon, Here you can change 5x to any value like 1x,2x etc.Font Awesome Large Iconsand to change color of the icon just put CSS in inline style property of af:icon like this
    <af:form id="f1">
                    <af:spacer width="10" height="150" id="s1"/>
                    <af:icon name="fab fa-apple" id="i1" styleClass="fab fa-apple fa-10x"/>
                    <af:spacer width="10" height="10" id="s2"/>
                    <af:icon name="fab fa-android" id="i2" styleClass="fab fa-android fa-10x" inlineStyle="color:green;"/>
                    <af:spacer width="10" height="10" id="s3"/>
                    <af:icon name="fab fa-codepen" id="i3" styleClass="fab fa-codepen fa-10x" inlineStyle="color:Tomato;"/>
                    <af:spacer width="10" height="10" id="s4"/>
                    <af:icon name="fas fa-car-side" id="i4" styleClass="fas fa-car fa-10x" inlineStyle="color: Dodgerblue;"/>
     </af:form>

    and icons look like this now

    Use Font Awesome 5 Icons in Oracle ADF

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

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *