Previewing and selecting predefined icons with the icon class picker

A single skin can have multiple icon fonts, including the standard icon font set provided in py-icons. To preview and select the correct icon for a control, use the icon class picker on the Properties panel for the button, link, or icon. Using predefined icons brings greater consistency to your user interface and helps users to understand the control's purpose.

Prerequisite: Add the py-icons text file to your application skin.

  1. Open the section that contains the control and then open the control's Properties panel.

  2. In the Image source list on the General tab, select Icon Class.

  3. Click the Open the icon class picker icon beside the Image source fields.

    An overlay displays all available icons.

  4. Optional: To filter icons by class name, use the search field on the overlay.

  5. Click an icon on the overlay to use it for the control.

  6. Optional: To adjust the element's styling without creating a new skin format, apply one or more CSS helper classes on the Presentation tab of the Properties panel.

    For example, you can use a helper class to center an element in a layout. For more information, see Adjusting cell styling with helper classes.

  7. Submit the updated properties and save the section.