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.