Commonly Used Bootstrap Icons for Oracle APEX

How to Use Icons as Report Links or Buttons in Oracle APEX?

Icons can significantly enhance the user experience in Oracle APEX applications by making buttons and links more visually appealing and intuitive. This guide walks you through how to use Bootstrap icons effectively in your Oracle APEX projects.

 

---

What Are Icons in Oracle APEX?

Icons in Oracle APEX are visual elements added via CSS classes. By inserting the appropriate HTML tag with the desired CSS class, you can display an icon in buttons, reports, or other UI components.

 

---

Step-by-Step Guide to Adding Icons

1. Adding Icons to Buttons

Follow these steps to include icons in your APEX buttons:

• Select the Button
  Navigate to the button you want to customize.
• Go to the "Appearance" Section
  Open the "Appearance" settings for the selected button.
• Choose a Button Template
  Select "Button with Icon" in the "Button Template" dropdown.
• Specify the Icon Class
  In the "Icon" field, enter the relevant icon class, such as fa fa-check.
• Preview and Save
  Check the changes and save your page to apply the icon.

 

---

2. Adding Icons to Reports (Regions)

Here's how you can use icons as links within report columns:

• Select the Report Region
  Choose the report (region) where you want to add an icon.
• Select a Column
  Pick the specific column where the icon will appear.
• Edit Column Properties
  Under the "Identification" section, set the column type to "Link."
• Configure the Link
  Go to the "Link" settings, establish the target link, and enter the following HTML in the "Link Text" field:
• <span aria-hidden="true" class="fa fa-check"></span>
• Preview and Save
  Save your changes and confirm the icon is displayed as intended.

 

---

Frequently Used Icons and Their Code

Here’s a list of commonly used icons and their corresponding HTML code:

• Create or Save Icon
• <span aria-hidden="true" class="fa fa-check"></span>
• Delete Icon
• <span aria-hidden="true" class="fa fa-trash-o"></span>
• Cancel Icon
• <span aria-hidden="true" class="fa fa-remove"></span>
• Edit Icon
• <span class="fa fa-edit" aria-hidden="true"></span>
• View Icon
• <span aria-hidden="true" class="fa fa-eye"></span>

 

---

Why Use Icons in Oracle APEX?

• Improved User Experience: Icons provide visual cues, making it easier for users to navigate.
• Enhanced Aesthetics: They make your application look more modern and professional.
• Better Accessibility: Icons combined with proper aria attributes improve accessibility for screen readers.

 

---

Icons are a powerful tool to enhance your Oracle APEX application. By following the steps above, you can add meaningful and visually appealing icons to your buttons, reports, and other UI components. Explore these options to make your applications more user-friendly and intuitive!

 {fullWidth}