Saturday, July 9, 2016

How to use Font Awesome Icon in Placeholder

One good way to make items more self explanatory is to use icons on their placeholders like the search item below

Create a css class to allow icon to be recognized

.placeholder {
   font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
}

and then set the created class to the item


Do not use the "Value Placeholder" to include the icon, if you do this, the code will be transformed into text. Search for the icon unicode at this link and then set it to the custom attributes field as the picture below.

placeholder=''


and then refresh the page.

    Oracle APEX 5.0 comes with FontAwesome version 4.2.0 on Universal Theme. If you want to upgrade for the last version to add some icons do the steps as follows

//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css

  1. In your Application go to Shared Components – Themes
  2. Click on Universal Theme – 42 to edit it
  3. Go to the Icons region
  4. Set "Custom Library File URLs" to //maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css 
  5. Set "Custom Prefix Class" to fa
  6. Click Apply Changes


7 comments:

  1. How do you add just one or two icons that are not part of the //maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css file such as a png file?

    ReplyDelete
  2. Try to change the class

    instead of

    .placeholder {
    font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
    }

    put the image url

    .placeholder {
    background-image: url("image_file.gif");
    }

    ReplyDelete
    Replies
    1. where do you change the placeholder at?

      Delete
  3. on the page attributes, css, inline section

    ReplyDelete
  4. using icon-login-username in css class does not work can you help me please

    ReplyDelete