How to use Font Awesome in Oracle Apex

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 ..\images\themes\theme_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 ..\images\themes\theme_26\css 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!