APEX 5: Adding an icon to a report column
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>
</span>
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.
Cristoph,
Nice post. Useful techique to know how to do.
Skip
Love this.
Nice!!!