X

Shay Shmeltzer's Oracle Development Tools Tips

Leveraging Icon Fonts (Font Awesome) in Oracle ADF - 500 New Icons for your app

Shay Shmeltzer
Director of Product Management - Oracle

Icon fonts are a growing trend among web developers, they make it quite simple to add icons to your web site and resize them for better responsive design.

Font Awesome is a popular open source icon font - providing over 500 icons that you can add to your application. I got several questions over the past couple of weeks about using these icons in ADF applications, so here is a short video showing you how to set this up with ADF 12.1.3 and using skins. (Quick note - before 12.1.3 you couldn't include these type of font in the skin css file - and you would have needed to directly refer to the CSS file from each page in your app - one more reason to upgrade your application to 12.1.3).

The basic steps:

  • Create a new skin for your ADF application (if you don't know how to do this, see this blog entry).
  • Download font awesome and copy the font-awesome-4.3.0 directory into your new skin directory
  • Copy the @font-face entry from the font-awesome.min.css file into your new skin.css file
  • Update the path in the various URI entries so it reflects the new relative location of the font files
  • Create class entries in your skin CSS for the icons you want to use - remember to add a font-family: FontAwesome; to make sure they use the new font.
  • Assign the classes to the styleclass property of your ADF Faces components.

Here is a demo showing how it is set up and how it works:

The skin1.css in the video is this:

@charset "UTF-8";

/**ADFFaces_Skin_File / DO NOT REMOVE**/

@namespace af "http://xmlns.oracle.com/adf/faces/rich";

@namespace dvt "http://xmlns.oracle.com/dss/adf/faces";

@font-face {

    font-family: 'FontAwesome';

    src: url('font-awesome-4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0');

    src: url('font-awesome-4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0')format('embedded-opentype'), url('font-awesome-4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0')format('woff2'), url('font-awesome-4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0')format('woff'), url('font-awesome-4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0')format('truetype'), url('font-awesome-4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular')format('svg');

    font-weight: normal;

    font-style: normal;

}

.heart:before {

    content: "\f004";

    font-family: FontAwesome;

}

.mail:before {

    content: "\f003";

    font-family: FontAwesome;

If you want to see how this could help with responsive design try this in your CSS as an example. Then resize the width of the browser window to see how the icons will change their size dynamically:

.heart:before {

    content: "\f004";

    font-family: FontAwesome;

    font-size: x-large;

}

.mail:before {

    content: "\f003";

    font-family: FontAwesome;

    font-size: x-large;

}

@media screen and (max-width:950px) {

    .heart:before {

        content: "\f004";

        font-family: FontAwesome;

        font-size: small;

    }

    .mail:before {

        content: "\f003";

        font-family: FontAwesome;

        font-size: small;

    }

Join the discussion

Comments ( 3 )
  • guest Tuesday, May 12, 2015

    Thank you shay so much.

    I tried it and it works very well.

    But I tried to use the animated icons on the website of "fontawesome" like fa-spinner but it didn't work.

    can you give me a hint on how to use it in adf.

    Thank you for your efforts.


  • guest Saturday, November 7, 2015

    For me I'm unable to see image. I have followed same as you did. But Cant able to see image, stead seeing some un rendered icon.

    Can you please help me on this.

    Jdev:12.2.1.


  • Ashish Sunday, July 23, 2017
    A very helpful post. I can now easily use font awesome icons with ADF faces components. But, somehow I am not able to align the icon in front of the button text as it always appears on top of the text. Do you have any suggestion on how to fix that?

    Thanks,
    Ashish
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.