Icons play a crucial role in enhancing the visual appeal and usability of Oracle APEX applications. In this post, we'll explore how to use Bootstrap icons in buttons, report links, and other elements within Oracle APEX. By following these steps, you can easily integrate icons into your application to improve user interaction and navigation.
How to Use Icons in Oracle APEX?
Icons are rendered in Oracle APEX using unique CSS classes applied through HTML tags. Let’s explore how to use icons effectively in buttons and reports.
1. Adding Icons to Buttons
Follow these steps to include an icon in a button:
- Select a Button: Choose the button where you want to add an icon.
- Navigate to "Appearance": Go to the Appearance section of the button's properties.
- Choose a Button Template: Under the Button Template setting, select "Button with icon".
- Specify the Icon Class: In the Icon field, enter the desired CSS class, such as:
fa fa-check- Save and Preview: Save your changes and preview the page to see the icon displayed on the button.
2. Adding Icons to Reports (Regions)
You can also include icons in report links within regions. Here’s how:
- Select a Report Region: Choose the region where you want to display an icon.
- Select a Column: Pick a column within the report for the icon.
- Navigate to "Identification": Go to the Identification section.
- Change the Column Type: Under the Type setting, select "Link".
- Define the Link Target: Specify a target link for the column.
- Add Icon HTML in Link Text: In the Link Text field, insert the following HTML:
<span class="fa fa-check" aria-hidden="true"></span>- Save and Preview: Save your changes and preview the page to see the icon within the report.
Icon Reference Code
Below is a collection of commonly used icons and their corresponding HTML code:
- Icon for Create or Save:
<span aria-hidden="true" class="fa fa-check"></span>- Icon for Delete Button:
<span aria-hidden="true" class="fa fa-trash-o"></span>- Icon for Cancel:
<span aria-hidden="true" class="fa fa-remove"></span>- Icon for Edit:
<span class="fa fa-edit" aria-hidden="true"></span>- Icon for View:
<span aria-hidden="true" class="fa fa-eye"></span>
Additional Resources
For a complete list of available icons and their CSS classes, refer to the following links:
- Oracle APEX Icons
- Font Awesome Icons
Conclusion
Using Bootstrap icons in Oracle APEX is a straightforward way to enhance the design and usability of your application. Whether it’s for buttons or report links, these small visual elements can significantly improve the user experience. Explore the resources provided to discover more icons and get creative with your designs!
{fullWidth}