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.
Before you begin: Add a control to the layout:
  1. Open the view that you want to edit.
    For more information, see Accessing views in your application.
  2. In the configuration pane on the right side of the window, hover over the control, and then click the Edit icon.
  3. 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.
  4. In Image Position, define the position of the icon in relation to the label on the control.
  5. 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.
  6. Click Apply.