Monday, January 2, 2017

Adding FontAwesome Icons to Buttons in APEX V5

I found that you can add FontAwesome icons to buttons on another blog, but can't find it now. The blog in question just had the icons but didn't explain how to implement them, so I've written this.

It makes buttons look a lot more professional.

From this:

To this:
You can also change the colours:


APEX V5 has FontAwesome support built in, although it's not the latest version, so some of the more recent icons won't work. If that is the case, you won't see the icon on the button, so pick one that works.

Go here to see the list of the FontAwesome Icons : http://fontawesome.io/cheatsheet/

So, to create a button with these is very easy, you just need to use the 'text with icon' template and tell it the icon you want.

Assuming you have a page with a region, click on the 'add button' icon.

Go through the prompts as usual, but when you get to the 'Button Attributes' select the 'Text with Icon' template:

Add the button as normal, selecting the position and name. I called mine 'Disk Space'.

Once added, select the button from the design page:





Scroll down to the 'Icon CSS Classes' property, and enter the name of the icon from the FontAwesome list in the link above.

In this case, I used 'fa-database':

Apply the changes, and play the page, and the icon will be shown on the button:




Here, the icon is to the right of the text - I prefer it on the left. This can be changed by updating the 'Icon Position' property.


Changing the colour is just a matter of updating the 'Type' property:


Danger is red, Primary is blue, Success is green and Warning is orange.

So, pretty easy to make the buttons look professional - here are some from one of my applications:





























No comments:

Post a Comment