January 10th, 2025
Stacking icons in Oracle Apex
Hello again!
Even we have hundreds of Font Apex icons to select, sometimes these icons do not reflect exactly what the button does.
Recently, I was working on a functionality to let users insert multiple records to my table. After the implementing the functionality, I needed an icon so that users can understand what it does. Unfortunately, I found out there is no multiple plus icon in Font APEX. So I decided to use some custom CSS classes and rules to have the different icons combined. This is the end result:
Implementing this is relatively easy. First, we need a static ID for the button. I have the button id: "add_multi". Then we need to select the secondary icon from the button -> appearance -> icon. This is only needed when you don't know the "content" attribute of the secondary icon. Or you can skip this step and find the "content" of the icon from this website. I will use content: "\f0fe" for my CSS rule as I want to stack "fa-plus-square" on top of "fa-plus-square".
After finding the content attribute, we just need 2 Inline CSS rules on the page:
#add_multi>span::after{
content: "\f0fe";
position: absolute;
top: 3px;
left: -4px;
}
#add_multi > span{
left: 3px;
bottom: 3px;
}
That's it. You might need to do some changes to CSS rules by the button's size, color and other attributes. Let me know if it works and is helpful.