Sometimes, it's just the icon on a darn button, card, or menu that makes all the difference.
Surely by now you've encountered using icons within Oracle APEX, and we've come a long way since Theme 25. To get anyone up to speed, APEX 5.0 saw the introduction of Font Awesome baked into the builder, which is a reputable CSS icon library for such things.
 |
| 5.1 vs 5.0 |
Now the same goes for the 1000+ icons that come with Font APEX, some of them database specific which for some reason excites me a little. If you need to catch up, Dick Dral has a great low down on what makes Font APEX awesome, so to speak, and for those who are familiar with Dick's work, that's a double down on word play - see his URL of his sample application, which is growing to quite a utility.
But if you would like to use the latest library, or even use it within APEX 5.0, Max Tremblay gave us this great post. It's a little more involved than Patrick's, but things aren't as easy.
The long snapshot of menu icons shows the difference between 5.1 on the left, and 5.0 on the right. They've cleaner, they scale better, and we can no doubt all thank Shakeeb.
Max provided some CSS that's required to suit adjust usage to Font APEX, but having an app with icons found all over the place, I encountered some other components that needed adjustment. With some further back & forth on the APEX slack channel, Max helped me come up with these.
/* Font APEX
CSS required to make Font APEX from 5.1 work in 5.0
Headstart provided by Max Tremblay
https://max-tremblay.blogspot.com.au/2017/02/using-font-apex-in-apex-50.html
*/
/* Most icons around the place */
.t-Icon[class*=' fa-'],.t-Icon[class^=fa-]{
font-family: font-apex!important;
font-size: initial;
}
/* Left side menu */
.t-TreeNav .a-TreeView-node--topLevel>.a-TreeView-content .fa{
font-size: initial;
}
/* Left side sub menu */
#t_TreeNav ul ul .a-TreeView-content .fa {
font-size: 12px;
padding: 10px 0;
}
/* Navbar dropdown */
.t-NavigationBar-menu .a-Menu-content .a-Menu-item .fa {
font-size: 12px;
}
/* Navbar top row */
.t-NavigationBar-item span.t-Icon {
padding-right: 5px;
padding-top: 0px;
font-size: 14px;
}
/* Slide tooltip plugin */
.a-DetailedContentList-icon {
padding-top: 10px;
}
/* Custom icon usage within breadcrumb */
.t-Breadcrumb-label .fa {
padding-top: 3px;
}I think this once again shows the versatility APEX has between versions, quite literally replacing one plugin with another, with a little help from the community.#letswreckthistogether
This is a great Post! Thanks for your help.
ReplyDeleteI just had one comment that I think might be important. For the modifier classes to work properly, ".fam-" then I had to add this bit of code to my theme as well.
.fa {
position: relative;
}
Otherwise, the modifier picks up on the next relatively positioned node and puts the modifier at the bottom-right of it. In my case, it was at the bottom right of the table.
Thanks for the feedback, but I can't quite visualise the effect you're seeing. Are you able to able to provide a screenshot?
ReplyDeleteSure, here are a couple of screenshots of the situation.
ReplyDeleteHere's a link to a couple screen shots: One with the .fa class set to position:relative as shown above and the other without it set.
The one with the modifier over the icon is the position:relative:
With fa class set to position:relative
The one with the modifier at the bottom of the table is the one without position relative:
With fa class not set to position:relative
Hope this helps. It may be just my version 5.0, but I thought someone might want to know how to handle it because I was stumped for an hour trying to figure out what was wrong until I saw the modifier at the bottom-right of the table.