Skip to main content

Font Awesome with ADF

For people who are not aware of Font Awesome, it gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Their whole icon library is based on CSS not Images.

Recently, we had to build a tree table based on Webcenter content's folder and file structure. And we needed to show proper icons for files (pdf, word etc.) and folders. Which should look like this 


 We choose Font Awesome, because it is scalable and easy to use.

But front-end was ADF, so we were a bit sceptical  about how to integrate both. Turned out it was quite easy. Special thanks for Casper Overweter to do the implementation.

1. Create an ADF Skin :

Create a custom skin, via New > Gallery.
Base it on alta-v1 skin.



2. Download Font Awesome :

Download the zip form their website. It's free.



Unzip it inside the "customSkin" folder. Next to your CSS.



3. Extend Font Awesome to your customSkin CSS :

Add the following lines to your CSS file, after the ADF faces namespace declarations.

@font-face {
    font-family: 'FontAwesome';
    src: url('font-awesome-4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('font-awesome-4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0')format('embedded-opentype'),
         url('font-awesome-4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0')format('woff2'),
         url('font-awesome-4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0')format('woff'),
         url('font-awesome-4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0')format('truetype'),
         url('font-awesome-4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular')format('svg');
    font-weight: normal;
    font-style: normal

}

4. Start using the awesome icons :

For example, for folders, we wanted to use : fa-folder-o



You need to find out first, what's the CSS definition of "fa-folder" in Font Awesome. Do a text search in the "font-awesome.css" inside the downloaded folder.

.fa-folder:before {
  content: "\f07b";
}

We need the content value to create our own style class in ADF. So in "customSkin.css", we add this for folder icons

.folder_icon:before {
    content: "\f07b";
    font-family: FontAwesome;
    font-size: small;
    color: #f7df7b;
}

5. Add these to your page with "af:icon" :

<af:icon name="folder" id="i1" styleClass="folder_icon">

6. Support for "disabled" property :

You can easily use "disabled" property on af:link and it will automatically pickup the disabled icon for you. So you don't need to add extra lines to your custom css.



That's all. Your application icons are not only light-weight, but they are exteremely scalable.






Comments

  1. hi Soham
    Thanks for the article.
    did not work for me, while i followed your steps.
    i am using Jdev 12.2.1.2 on Mac.
    do you have any idea?
    how to solve it?

    Yhanks

    ReplyDelete
    Replies
    1. Update :
      after some tweaking, i works.
      just changed the fonts folder location, update the links in css file.
      thanks

      Delete

Post a Comment

Popular posts from this blog

Secure your Node/Express REST APIs using Passport JS

Recently I have been involved in various discussions on how to make the REST APIs as secure as SOAP.
First of all, let me start with a very basic statement, about security, it doesn't depend on your Webservice type, be it REST or SOAP, your design decisions depicts whether they can be made secure or not.
In this example blog, I will use "Micro CRUD services for Oracle Database Cloud" APIs and implement (read attach) Passport's "local" authentication strategy, to make them secure.

Code in Github : LeasifyAPIs with Passport

What is Passport JS? (from Documentation)

Passport is authentication middleware for Node. It is designed to serve a singular purpose: authenticate requests. When writing modules, encapsulation is a virtue, so Passport delegates all other functionality to the application. This separation of concerns keeps code clean and maintainable, and makes Passport extremely easy to integrate into an application.

What are "strategies" in P…

ADF Utility : Find UIComponent from Managed Bean

Many a times, it is required to find an UIComponent from ADF managed bean, to do something with it, for example : change the value of an af:outputText, change readOnly property of an af:inputText etc.

private UIComponent getUIComponent(String id) { 

        FacesContext facesCtx = FacesContext.getCurrentInstance(); 
        return findComponent(facesCtx.getViewRoot(), id);
    } 

    private UIComponent findComponent(UIComponent base, String id) {

        if (id.equals(base.getId())) {
            return base;
        }

        UIComponent children = null;
        UIComponent result = null;
        Iterator childrens = base.getFacetsAndChildren();
        while (childrens.hasNext() && (result == null)) {
            children = (UIComponent)childrens.next();
            if (id.equals(children.getId())) {
                result = children;
                break;
            }
            result = findComponent(children, id);
            if (result != null) {
                break;
            }
  …

Chatbots and Oracle Cloud Services

Thanks to Oracle A-Team, I had a chance to work with Chatbots.
3 pure NodeJS applications, on couple of Oracle Cloud platforms and Facebook messenger, and my chatbot was running.

Let me explain, the architecture a bit. To start with, following is the simple representation of how it works.