Using CSS to Assign a Menu Icon
This post will show how to use EGL’s CSS Editor to create a class that will be used to assign an icon to a menu item
To begin, we’ll need a place to put our images used with the application. It is common to have an images directory under the WebContent directory, shown below. However, EGL already supplies an icons directory, so we’ll put our icons there.
The icons shown above are those for a back facing arrow (“back, and to the left”) and a right facing arrow (forward).
Use the CSS Editor to create Classes
The image below shows RDi’s Cascading Style Sheet editor. The last two classes i.e. .backArrow and .forwardArrow define references to the .PNG files in the icons directory.
At the right of the editor you can see that the back-facing arrow has been selected as denoted by the blue horizontal bar. At the upper left of the editor widow the effect of the CSS class is displayed.
Referencing the CSS Class on a Menu Item
Show below is the EGL code for a menu item. It references the CSS class definition for the forward and backward facing arrows. This will result in the arrows being display at the left of each menu item.
Fig.1 – EGL code defining a menu and its items that reference a CSS class.
The Menu Items
The menu below shows the icons as they are presented next to each of the menu items described by the EGL code, above.
This post shows how to use CSS to define style classes so they can be used to show icons for specific menu items. Defining CSS styles in this manner centralizes them in a single file. This allows the developer to make a single change that effects the whole look and feel of the application.