Thursday, June 19, 2014

APEX 5.0 - Button Appearance (template options + Font Awesome)

With the new template, the new buttons for example are highly customisable in APEX 5.0
(icon on the left or right, spacing between, etc.)


In the Appearance section you find kinda the same options as in APEX 4.x, but when you look a bit further, there's so much more now.


You can declaratively change the way your button looks like, by clicking the Template Options:


The icons you can chose for your button are based on Font Awesome, a great scalable vector icons library.

I use Font Awesome in APEX 4.x too, but I had to create a new button template and put the name of the icon in the class section. This is now all integrated and declarative in APEX 5.0.

at

4 comments:

  1. Sim3/18/2015 1:00 AM

    Hello Dim,

    I have clicked on button which I have created and 'Template Option' is greyed out and unable to edit . Am I missing something or doing wrong?

    Cheers
    Sim

    ReplyDelete
  2. Trevis7/06/2015 1:08 AM

    Hi Dim,

    Do you know how to set fa-lg (or any fa's size) on Icon CSS Classes without need to create a new button template?

    I'm able to set pull-left or pull-right to change icon alignment, but I can not resize the icons.

    Kind regards
    Rafael

    ReplyDelete
  3. Dimitri Gielis7/08/2015 2:21 PM

    Hi Rafael,

    You can include the fa-lg class on your page in the css section or you can add it to the page template.
    So you don't need to create a new button template. And in case you wanted to make things more declarative, you would use Template Options, so same button template, just different options.

    Hope that helps,
    Dimitri

    ReplyDelete
  4. Trevis7/11/2015 9:50 PM

    Hi Dimitri,

    Actually I tried to include the fa-lg class in my Text with Icon button, but it doesn't work. I needed to remove the class t-Button-Icon from template to make fa-lg works. But it's ok! I just thought that was a little strange the template Text with Icon doesn't accept the fa-lg.

    Thank you for your reply!

    ReplyDelete