{"id":545,"date":"2014-09-08T10:31:00","date_gmt":"2014-09-08T09:31:00","guid":{"rendered":"http:\/\/www.pitss.org\/blog\/?guid=1f0b81e0a8594f7b9ecd1eef95f7d7df"},"modified":"2014-09-08T10:31:00","modified_gmt":"2014-09-08T09:31:00","slug":"how-to-use-font-awesome-in-oracle-apex","status":"publish","type":"post","link":"https:\/\/pitss.org\/de\/how-to-use-font-awesome-in-oracle-apex\/","title":{"rendered":"How to use Font Awesome in Oracle Apex"},"content":{"rendered":"

I will show to you how to use Font Awesome icons in APEX on login page like this <\/p>\n

<\/a><\/div>\n

1. At first you must download Font Awsome from page http:\/\/fortawesome.github.io\/Font-Awesome\/<\/a><\/p>\n

2. Extract zip file into ..imagesthemestheme_xx (xx is number of theme that you use). In this example I use theme 26<\/p>\n

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:

<\/span>@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;
}<\/i><\/span><\/p>\n

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:<\/p>\n

div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input.text_field [type=“text“] {
    position: relative;
}<\/p>\n

div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input{ font-family: ‚FontAwesome‘; } \/* This is for the placeholder *\/<\/p>\n

div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input.text_field:before {
    font-family: ‚FontAwesome‘;
    position: absolute;
    top: 0px;
    left: -5px;
    content: „f007“;
}<\/p>\n

div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input.password[type=“password“] {
    position: relative;
}<\/p>\n

div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input{ font-family: ‚FontAwesome‘; } \/* This is for the placeholder *\/<\/p>\n

div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input.password:before {
    font-family: ‚FontAwesome‘;
    position: absolute;
    top: 0px;
    left: -5px;
    content: „f023“;
}<\/span><\/i><\/p>\n

5. Click on Apply changes and then open P101_USERNAME and put in „HTML Form Element Attributes“ field this code: placeholder=“&#f023; Username“<\/span><\/i><\/p>\n

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“<\/i><\/span>.
7. Click on apply changes and then run the page and you will get the result as in the image above.<\/span><\/span><\/span>
<\/span><\/span> <\/span><\/span>
<\/span><\/span>If<\/span> you have any questions<\/span> feel free to ask<\/span>!<\/span><\/span> <\/span><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

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 th…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-545","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/pitss.org\/de\/wp-json\/wp\/v2\/posts\/545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pitss.org\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pitss.org\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pitss.org\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pitss.org\/de\/wp-json\/wp\/v2\/comments?post=545"}],"version-history":[{"count":0,"href":"https:\/\/pitss.org\/de\/wp-json\/wp\/v2\/posts\/545\/revisions"}],"wp:attachment":[{"href":"https:\/\/pitss.org\/de\/wp-json\/wp\/v2\/media?parent=545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pitss.org\/de\/wp-json\/wp\/v2\/categories?post=545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pitss.org\/de\/wp-json\/wp\/v2\/tags?post=545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}