5.18.10 Accessing Font APEX

View the Font APEX icons library from Application Utilities page or by selecting the Appearance, Icon attibute for select components in Page Designer.

• About Font APEX Icons
  Font APEX is the icon library for Oracle APEX and the Universal Theme.
• Browsing Icons from Application Utilities
  You can search and filter icons on the Font APEX page in Utilites.
• Browsing Font Icons from Page Designer
  For select page components, browse Font APEX icons in Page Designer by configuring the Appearance, Icon attribute.

5.18.10.1 About Font APEX Icons

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

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 APEX 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.18.10.2 Browsing Icons from Application Utilities

You can search and filter icons on the Font APEX page in Utilites.

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 press Enter.
   • Select a Category.
7. Under Icons, select an icon.

   The following example shows fa-gear.

   
   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.

5.18.10.3 Browsing Font Icons from Page Designer

For select page components, browse Font APEX icons in Page Designer by configuring the Appearance, Icon attribute.

The example that follows demonstrates how to select a Font APEX icon for a Static Content region.

To browse Font APEX icons for a Static Content region:

1. View the page in Page Designer:
   1. On the Workspace home page, click the App Builder icon.
   2. Select an application.
   3. Select a page.
   Page Designer appears.
2. Create a Static Content region:
   1. Right-click an existing container to display the context menu.
   2. From the context menu, select Create Region.
3. In the Property Editor, edit the appropriate attributes:
   1. Identification, Name - Enter a region name. The region name is required, it is used by Page Designer to identify the region on the tree view and the grid layout view. If the Title attribute is empty, the region Name is used as the runtime region title.
   2. Identification, Title - Enter a region title. The region title is optional and only displays when it is defined in the region template.
   3. Identification, Type - Specify how the region is rendered. Select Static Content.
   4. Select an icon from the Pick Icon dialog:

      • Appearance, Icon - Click the List of Values icon.

        The Pick Icon dialog appears.

        
        

        
        Description of the illustration pick_icon_dialog.png

        
        

      • Font APEX - Select the Style, Category, and icon.

      • Utilized - View currently selected icons.
   5. Edit any remaining attributes. The attributes that display depend upon the region Type.

      To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

4. Click Save or Save and Run Page.