I will show to you how to use Font Awesome icons in APEX on login page like this
1. At first you must download Font Awsome from page http://fortawesome.github.io/Font-Awesome/
2. Extract zip file into ..imagesthemestheme_xx (xx is number of theme that you use). In this example I use theme 26
3. Open css file of theme in my case that is 4_2.css from ..imagesthemestheme_26css and put at the begining of the code:
@font-face {
font-family: ‚FontAwesome‘;
src: url(‚../font-awesome-4.2.0/fonts/fontawesome-webfont.eot?v=4.0.3‘);
src: url(‚../font-awesome-4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3‘) format(‚embedded-opentype‘), url(‚../font-awesome-4.2.0/fonts/fontawesome-webfont.woff?v=4.0.3‘) format(‚woff‘), url(‚../font-awesome-4.2.0/fonts/fontawesome-webfont.ttf?v=4.0.3‘) format(‚truetype‘), url(‚../font-awesome-4.2.0/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular‘) format(’svg‘);
font-weight: normal;
font-style: normal;
}
4. Save the file and then go to your apex application and in page 101 definition go to CSS section inline field paste this code:
div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input.text_field [type=“text“] {
position: relative;
}
div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input{ font-family: ‚FontAwesome‘; } /* This is for the placeholder */
div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input.text_field:before {
font-family: ‚FontAwesome‘;
position: absolute;
top: 0px;
left: -5px;
content: „f007“;
}
div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input.password[type=“password“] {
position: relative;
}
div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input{ font-family: ‚FontAwesome‘; } /* This is for the placeholder */
div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input.password:before {
font-family: ‚FontAwesome‘;
position: absolute;
top: 0px;
left: -5px;
content: „f023“;
}
5. Click on Apply changes and then open P101_USERNAME and put in „HTML Form Element Attributes“ field this code: placeholder=“&#f023; Username“
6. Then you will do same step for P101_PASSWORD like step before, except you will put in „HTML Form Element Attributes“ field this code: placeholder=“ Password“.
7. Click on apply changes and then run the page and you will get the result as in the image above.
If you have any questions feel free to ask!