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;
}