X

Technical Articles relating to Oracle Development Tools and Frameworks

  • VBCS
    December 16, 2019

Using the Oracle Font APEX Font in Visual Builder

Duncan Mills
Architect

Introduction

Visual Builder has a small set of built-in icons that can be used for buttons, and which can be directly selected via the property inspector. 

On top of this, Oracle JET also supplies a set of standard icons that are used by the JET components themselves - these can be seen in the JET cookbook:

Both of these sets of images work in the same way, i.e. you apply a couple of style-classes to a span or div in the relevant slot of the button or other control.  e.g. 

<oj-button>Chat
  <span class="vb-icon vb-icon-chat-bubble" slot="startIcon"></span>
</oj-button>

 or

<oj-button>Search
  <span class="oj-fwk-icon oj-fwk-icon-magnifier" slot="startIcon"></span>
</oj-button>

That's fine, but what if you want a wider set?  Well it's simple enough to add in extra icon fonts to use, so let's take a look at that. 

The Oracle Font Apex Icon Set

To illustrate the process I'm going to use the Oracle Font APEX icon set which you can browse here.  The principle, however, is common to other icon fonts such as Font Awesome, you'll just need the location of the style sheet that defines the font styles and the names of the styles themselves. 

This particular font is released under the Open Font License 1.1 and MIT Licence, see the Project Homepage for more detailed information.

In the case of the Universal Theme icon set, everything you need can be accessed either by downloading the files from the above GITHub project into your Visual Builder application, or more conveniently by just pointing to the CDN location of the files, which is the approach I'll use here. 

Assuming the CDN approach the only information you need is the location of the CSS which is https://static.oracle.com/cdn/apex/19.2.0.00.18/libraries/font-apex/2.1/css/font-apex.min.css

Ok, to add this into your application, switch the Visual Builder navigator into Source View using the last icon in the vertical toolbar on the left hand side, then locate the index.html for your application as shown:

Next, add the following line to the file after the existing statement that imports the app.css in the <head> section of the document:

<link type="text/css" rel="stylesheet" href="https://static.oracle.com/cdn/apex/19.2.0.00.18/libraries/font-apex/2.1/css/font-apex.min.css">

And that's it! 

To use the font you just need to set the class attribute of you spans (as above) to the correct values for the icon you want.  If you use the font browser you can select the icon, configure the size variable that you want and then copy the correct class names really simply.  e.g. 

Use the Icon copy option to copy the correct class and paste that into your button as before, remembering to include the fa class as well. 

<oj-button>Save
   <span class="fa fa-save" slot="startIcon"></span> 
</oj-button>

With the final result of:

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.