Applicable to Theme Cosmos applications
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.
you can add a shopping cart icon to a button that launches the checkout process in an online
Before you begin: Add a control to the layout:
Note: For accessibility purposes, ensure that the image includes a descriptive
helper text that a screen reader can process.
- Open the view that you want to edit.
- In the configuration pane on the right side of the
window, hover over the control, and then click the Edit
- 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
- To set a property as the source of the image, select
Property, and then define the target property for
- To select an image from a CSS class-based folder, select Icon
Class, and then click the Open the icon class
- 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:
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
- 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.
- Click Apply.