Adding icons to controls
Make the buttons and links easier to see and the user interface more intuitive by adding icons to controls in your application. Icons provide a familiar graphical representation of the action that a control triggers.
For example, you can add a shopping cart icon to a button that launches the checkout process in an online store.- To add a button control, see Configuring a Button control.
- To add a link control, see Adding UI components to a view.
- Open the view that you want to edit.For more information, see Accessing views in your application.
- In the configuration pane on the right side of the window, hover over the control, and then click the Edit icon.
- On the General tab, in the Image
source list, select the source of the icon:
- To select an image from the image catalog, select Simple Image, and then click the Show Image Viewer icon.
- To set a property as the source of the image, select Property, and then define the target property for the field.
- To select an image from a CSS class-based folder, select Icon Class, and then click the Open the icon class picker icon.
- In Image Position, define the position of the icon in relation to the label on the control.
- Optional: To adjust the appearance of the control, on the
Presentation tab, do one of the following actions:
- To make minor formatting changes to the control and the cell in which it is embedded, apply a CSS helper class. For more information, see CSS helper classes.
- To apply styling through a reusable skin format, in Control format, select the format you want to use. For more information, see Component style formats.
For example: To increase the font and icon size on a button, you can either use the text-size-large CSS helper class, or create a control format that imposes a specific font size on the button. By editing control formats in Dev Studio skin rules, you can customize a wide variety of formatting options, including font type, borders, and padding. - Click Apply.
Previous topic Adding text to controls Next topic Setting advanced presentation options for controls