5.14.11 Accessing Font APEX

View the Font APEX page to search for Font APEX icons and view HTML markup.

• Font APEX
  Font APEX is the icon library for Oracle Application Express and the Universal Theme.
• Viewing Font APEX Icons
  Search for and view Font APEX icons on the Font APEX page.

5.14.11.1 Font APEX

Font APEX is the icon library for Oracle Application Express and the Universal Theme.

Font APEX was originally designed as a replacement for Font Awesome 4. The library contains versions of nearly all the Font Awesome icons, but each has been re-drawn on a 16x16 grid as line-icons. To make it seamless to switch from Font Awesome to Font APEX, some icons are named using the same "fa" prefix.

Small icons are based on a 16x16 grid and are ideally suited for buttons and menus. Large icons are based on a 32x32 grid and are well suited for places where you need to provide a larger graphic, such as cards, media lists, or hero regions.

Many Application Express components automatically use the large or small icons based on the context (such as Template Options). For example, when using Cards, the Block and Featured template option automatically shows the larger versions of the icons. In contrast, the Basic and Compact template options use icons from the smaller set. Font APEX contains over 1150 icons. You can choose from 25 modifiers that you can place on top of any existing icons so you can customize any icon to fit your needs.

5.14.11.2 Viewing Font APEX Icons

Search for and view Font APEX icons on the Font APEX page.

Once you find the appropriate icon, you can customize the icon by configuring attributes. As you make selections, the icon image changes and HTML and Icon attributes are updated. You can then copy the updated HTML Markup and icon property for use in your applications.

To view Font APEX icons:

1. Navigate to the Workspace home page.
2. Click the App Builder icon.
3. Select an application.

   The Application home page appears.

4. Click Utilities.
5. Click Font APEX Icons.

   The Font APEX page appear.

6. Use the Search region on the right side of the page to narrow the display.
   • Choose Small or Large
   • In the Search field, enter keywords and click Go.
   • Select a Category.
7. Under Icons, select an icon.

   The following example shows fa-bar-chart.

   
   Description of the illustration font_apex.png
8. Configure the attributes:
   • Size
   • Scale
   • Animation
   • Rotate
   • Modifier

   As you configure attributes, the icon image changes and the HTML and Icon attributes are updated to reflect your selections.

9. HTML - Displays the HTML Markup. Click Copy to copy the HTML Markup.
10. Icon - Displays the icon property for buttons, regions, and other components. Click Copy to copy the icon..
11. Click Reset Icon in the upper right corner to revert the attributes to the default settings.