Font Awesome buttons in APEX 4.2

how to create (author: Joost Drost)

inSystems Font Awesome

There is a nice blog from Dick Dral descibing how you can create links with a Font Awesome image. The same technique can be applied in Oracle APEX to create buttons. Because it’s APEX, the steps involved are somewhat different.

This blog post describes how to create a couple of templates in APEX that will allow you to add a button with a Font Awesome image declaratively. That is select the proper template and then add the css classes to the property field. In order to achieve this you need to create several objects in your APEX workspace (Note: this works with theme 25):

  • upload a css file so that you can reuse the style definitions
  • create a page template with a reference to the Font Awesome css
  • create a Button template that can display a Font Awesome image

The css file

The css file is named fa_page.css (it must be included in you page definition), and it contains the code below. The first class defines some general properties for the Font Awesome image and a default size of 30 px. The other classes only define a size.

.fa-icon {
border-radius: 3px;
color: #FFFFFF;
font-family: FontAweSome;
font-size: 20px;
height: 30px;
width: 30px;
line-height: 30px;
margin: auto;
margin-top:5px;
}
.fa60px {
font-size: 50px;
height: 60px;
width: 60px;
line-height: 60px;
}
.fa90px {
font-size: 80px;
height: 90px;
width: 90px;
line-height: 90px;
}
.fa120px {
font-size: 110px;
height: 120px;
width: 120px;
line-height: 120px;
}

The page template

Create a copy of a page template for example “One Level Tabs – Left Sidebar” and call it “fa One Level Tabs – Left Sidebar”. Edit the new page template: in the Definition/Header section add the following line in the <head> tag:

<link rel=”stylesheet” href=”#WORKSPACE_IMAGES#fa_page.css” type=”text/css”>

in the Cascading Style Sheet/File Urls section add line:

//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css

The button Template

I couldn’t find a button template that displays a Font Awesome image properly, so a new one is needed. Create a copy of “Large Button – Icon Only” with name “fa Large Button – Icon Only”. Remove class “iconButton”, and add class “fa-icon”.

Apply on a page

Create a new page with a region. There is still one thing missing from the definitions and that is color. Edit the page, in the CSS/inline section add:

.fa-blue {
background-color: #3162A2;
}
.fa-orange {
background-color: #FC9C4B;
}
.fa-red {
background-color: #FF0000;
}
.fa-purple {
background-color: #292677;
}
.fa-green {
background-color: #6FAC04;
}

Now add some buttons to the region. Edit the button attributes, set Button style to Template Base Button, Button Template to “fa Large Button – Icon Only”. On the Font Awesome icons page, you can select the image you want and enter it’s name in the Button CSS Classes, add a color and a size and you’re done.

Share this

Contact

Heb je vragen of opmerkingen? Aarzel niet om contact op te nemen. Dat kan via de algemene contactgegevens, rechtstreeks met de genoemde contactpersoon op een van de detailpagina’s, of via onderstaande knop.

7 april 2025

VoxxedDays Amsterdam 2025

Op donderdag 3 april 2025 bezocht Marcel Lambrechts de eerste VOXXEDDAYS in Amsterdam. Het was een dag vol interessante sessies, waarbij het soms moeilijk was een keuze te maken welke sessie te volgen.

12 maart 2025

Bijna 30 jaar ervaring met Oracle

inSystems, fka Quobell, en de software development tools van Oracle hebben een lange historie samen. Voordat Quobell in 1996 het levenslicht zag, realiseerden de oprichters al applicaties met de producten van Oracle.

Opdrachten uitgevoerd voor

Rabobank
Cannock
ING Bank
Gemeente Den Haag
UBR Uitvoeringsorganisatie Bedrijfsvoering Rijk
Thales
Gemeente Apeldoorn
Syntrus Achmea Real Estate & Finance
Alphabet
Stedin
Oracle University
Telegraaf Media Groep
CBR
Rechtspraak
Universiteit Tilburg
WVDB Adviseurs Accountants
Greenchoice
inSystems KLM
Nederlandse Spoorwegen
Allianz
Ziggo
DICTU
VTTI
TU Eindhoven
Rendo
VION Food Group
Altran
PC Uitvaart
IBM
ASR Nederland
GVB
Darling
Fokker
RAVU
Ministerie van Economische Zaken, Landbouw & Innovatie
Leaseplan
Bank Mendes Gans
MN Services
RIGD LOXIA
SVB
Gemeente Gouda
CB Logistics
BMW
TenneT
Arval BNP Paribas
Ahold
Eneco
Politie
VAA ICT Consultancy
Van Iperen Groeispecialisten
Multi Tank Card
Provincie Utrecht
JUVA