APEX 5: Adding an icon to a report column

November 11, 2015 at 3:35 pm | Posted in Oracle Developement | 3 Comments

On a report, I needed to display a delete icon, that changes colors on hover. Here is how I went about it:


In the report, I set the the Customer ID column to type Plain Text. And added the following code to the HTML Expression:

<span class=”delIcon fa-stack”>
<i class=”fa fa-square-o fa-stack-2x”></i>
<i class=”fa fa-remove fa-stack-1x” style=”line-height: 20px;”></i>

I got the code snippet from the FontAwesome website. It simply stacks two fontawesome icons on top of each other. I added the class dellIcon to the span, so I could control the color and the hover behavior.


The following CSS adds the color and the hover color to the icon:

.delIcon {
color: #EF9A9A;

.delIcon:hover {
color: #D32F2F;


That’s it.



RSS feed for comments on this post. TrackBack URI

  1. Cristoph,
    Nice post. Useful techique to know how to do.

  2. Love this.

  3. Nice!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Entries and comments feeds.

%d bloggers like this: